Vue.js开发常见问题解析

此前的Vue.js系列文章:

camelClass & kebab-case

HTML标签中的属性名不区分大小写。设置prop名字为camelClass形式的时候,需要转换为kebab-case形式(短横线)在HTML中使用。

Vue.component('child', {
    //这里可以是camelClass形式
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>'
});
<!-- 对应在HTML中必须是短横线分隔 -->
<child my-message="hello"></child>

字面量语法 & 动态语法

这个问题比较绕,也算是一个笔记常犯的一个错误吧,使用字面量语法传递数值:

<!-- 传递了一个字符串“1” -->
<comp some-prop="1"></comp>

因为他是一个字面prop,它的值是字符串“1”,而不是以实际的数字传递下去。如果想传递一个真实的JavaScript类型的数字,则需要使用动态语法,从而让它的值被当做JavaScript表达式计算。

<!-- 传递实际的数字 -->
<comp :some-prop="1"></comp>

模板解析

Vue的模板是DOM模板,使用浏览器原生的解析器而不是自己实现一个。相比字符串模板,DOM模板有一些好处,但是也有问题,它必须是有效的HTML片段。一些HTML元素对什么元素可以放在它里面有限制。常见的限制有:

  • a不能包行其他的交互元素(如按钮、链接)

  • ul和ol只能直接包含li。

  • select只能包含option和optgroup。

  • table只能直接包含thead、tbody、ftoot、tr、caption、col、colgroup。

  • tr只能直接包含th和td。

在实际应用中,这些限制会导致意外的结果。尽管再简单的情况下它可能可以工作,但是我们不能依赖自定义组件在浏览器验证之前展开结果。例如 <my-select><option>....</option></my-select> 不是有效的模板,即使 my-select 组件最终展开为 <select>...</select>

另一个结果是,自定义标签(包括自定义元素和特殊标签,如 <component><template><partial> )不能用在ul、select、table等对内部元素有限制的标签内。放在这些元素内的自定义标签将被提到元素的外面,因而渲染不正确。

自定义元素应当使用 is 特性,如

<table>
    <tr is="my-component"></tr>
</table>

<template> 不能用在 <table> 内,这时应该使用 <tbody><table> 可以有多个 <tbody> 。如下:

<table>
    <tbody v-for="item in items">
        <tr>Even row</tr>
        <tr>Odd row</tr>
    </tbody>
</table>

如何解决数据层级结构太深的问题

在开发业务的时候,经常会出现异步获取数据的情况,有时候数据层次比较深。如:

<span class="airport" v-text="ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegment - 1].depAirportZh"></span>

我们可以使用 vm.$set 手动定义一层数据。

vm.$set("depAirportZh" ,ticketInfo.flight.fromSegments[ticketInfo.flight.fromSegments - 1] .depAirportZh)

data中没有定义计算属性,它是如何被使用的

如下代码:

<div id="example">
    a = {{ a }}, b = {{ b }}
</div>

var vm = new Vue({
    el: '#example',
    data: {
        a: 1
    },
    computed: {
        b: function() {
            return this.a + 1;
        }
    }
});

对于上面计算属性b是怎么被使用的?实际上它并没有把计算数据放到 $data 里,而是通过 Object.definePropert(tihs, key, def) 直接定义到了实例上。

《Vue.js权威指南》读书笔记

我来评几句
登录后评论

已发表评论数()