VueJs常见问题总结

1、响应式属性和方法

每个 Vue 实例都会代理其 data 对象里所有的属性。

    var data = { a: 1 }
    var vm = new Vue({
          data: data
    })

    vm.a === data.a // -> true

    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3

即：都可以使vm.xxx这种方式获取和修改实例属性。

注意：

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统。

那么这种情况的话，可以使用VueJs的vm.$xxx的方式来修改实例属性，这同样会触发视图更新，响应式的改变。

2、生命周期钩子

生命周期钩子包括created、beforeCompile、compiled、ready、beforeDestroy、destroyed

钩子的 this 指向调用它的 Vue 实例

我们可以在钩子的方法中使用this来指代当前实例。Vuejs中没有控制器的概念，组件的自定义逻辑可以分割在这些钩子里面。

3、插值

单词插值，只有在第一次渲染时候渲染值，之后不会随实例属性值的变化而改变，如：

    <span>单词插值: {{* msg }}</span>

插入原始HTML，这种方式内容以 HTML 字符串插入，数据绑定将被忽略，如：

    <div>{{{ raw_html }}}</div>

如果需要复用模板片断，应当使用 partials

注意：

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。记住，只对可信内容使用 HTML 插值，永不用于用户提交的内容。

4、v-show 和 v-if的选择

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

5、使用track-by，优化列表循环

因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

例如，假定数据为：

{
  items: [
    { _uid: '88f869d', ... },
    { _uid: '7496c10', ... }
  ]
}

然后可以这样给出提示：

<div v-for="item in items" track-by="_uid">
  <!-- content -->
</div>

然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: ‘88f869d’ 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

6、prop数据绑定）=

prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

解决办法 : 使用 .sync 或.once 绑定修饰符显式地强制双向或单次绑定

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

7、组件的父链

子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。