Vue.js在使用中的一些注意知识点

 

 

1.每一个 Vue 实例都会代理其 data 对象里全部的属性。

2.注意只有这些被代理的属性是响应的。若是在实例建立以后添加新的属性到实例上，它不会触发视图更新。

3.除了 data 属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。

模板语法

1.Vue.js 使用了基于HTML的模版语法，容许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循规范的浏览器和 HTML 解析器解析。

2.在底层的实现上， Vue 将模板编译成虚拟DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 可以智能地计算出从新渲染组件的最小代价并应用到 DOM 操做上。

3.Mustache里面只能是JS表达式，不然不会生效。

4.指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

5.过滤器设计目的就是用于文本转换，为了在其余指令中实现更复杂的数据变换，你应该使用计算属性。

计算属性

1.计算属性方法在组件 beforeMount 以后，Mounted 以前都会执行一遍。

2.计算属性方法能够没有返回值。可是该属性使用，即在模板中使用了，不然不起任何做用。

3.不通过计算属性，咱们能够在method中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不一样的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会从新取值。这就意味着只要message没有发生改变，屡次访问reversedMessage（computed内的一个方法）计算属性会当即返回以前的计算结果，而没必要再次执行函数。

4.计算属性是依赖缓存的；而methods是没有缓存的，每次都执行一遍。

5.计算属性默认只有getter，不过在须要时你也能够提供一个 setter。参考官方实例：https://cn.vuejs.org/v2/guide/computed.html#计算-setter

6.当你想要在数据变化响应时，执行异步操做或开销较大的操做，water方法（或者 vm.$watch API）是颇有用的。

条件渲染

1.不一样的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

2.通常来讲， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。所以，若是须要频繁切换使用 v-show 较好，若是在运行时条件不大可能改变则使用 v-if 较好。

3.vue尝试尽量高效的渲染元素，一般会复用已有元素而不是从头开始渲染。可是条件渲染的时候，有时须要从新渲染而不是服用已有元素，因此能够经过设置惟一的key来实现元素不复用。参考官方例子：https://cn.vuejs.org/v2/guide/conditional.html#使用-key-控制元素的可重用

列表渲染

1.在遍历对象时，是按 Object.keys() 的结果遍历，可是不能保证它的结果在不一样的 JavaScript 引擎下是一致的。

2.v-for 也能够取整数。在这种状况下，它将重复屡次模板。

3.在用 v-for 渲染组件的时候，不能自动传递数据到组件里，由于组件有本身独立的做用域。为了传递迭代数据到组件里，咱们要用 props。不自动注入 item 到组件里的缘由是，由于这使得组件会紧密耦合到 v-for 如何运做。

表单控件

1.对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 一般是静态字符串（对于勾选框是逻辑值）。

组件

1.在 Vue 里，一个组件实质上是一个拥有预约义选项的一个 Vue 实例。

2.使用组件时，大多数选项能够被传入到Vue构造器中，有一个例外： data 必须是函数。 缘由的话，由于组件可能被屡次调用，当data为普通对象时，data内的数据会被共享，当为函数的时候，则每一个组件生成的为独立data做用域。

3.在 Vue.js 中，父子组件的关系能够总结为 props down, events up 。父组件经过 props 向下传递数据给子组件，子组件经过 events 给父组件发送消息。

4.注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，若是 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

5.Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行相似，可是on和on和emit 不是addEventListener 和 dispatchEvent 的别名。

6.$refs 只在组件渲染完成后才填充，而且它是非响应式的。它仅仅做为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用 $refs 。

响应原理

vue中的数据双向绑定中，只有改变vue实例上的属性时才能动态更新试图。

当data中有一个属性为对象和数组时，直接修改对象和数组的某一项数据是没办法触发试图更新的。https://vuefe.cn/v2/guide/list.html#注意事项 https://vuefe.cn/v2/guide/reactivity.html#变化检测问题

数组解决方式：

对象只能用第一种方式。

1 Vue.set(example1.items, indexOfItem, newValue);
2 example1.items.splice(indexOfItem, 1, newValue)