vue源码-小知识点

data选项

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，那么对 它的改动将不会触发任何视图的更新。

Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

必须是一个函数

当一个组件被定义时，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实列。如果data仍然是一个纯粹的对象，则所有的实列将共享引用同一个数据对象。通过提供data函数，每次创建一个新实例后，返回初始数据的一个全新副本的数据对象。

生命周期

不要在选项 property 或回调上使用箭头函数。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止。

模板语法

在vue文件中编写模板语法，最终会在底层实现中编译成渲染函数。

基于HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

1、使用“Mustache”语法 (双大括号) 的文本插值。
2、v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。
3、双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。

注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

指令

v-bind和v-on

对动态参数表达式的约束
动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

计算属性和侦听器

计算属性是基于它们的响应式依赖进行缓存的。Date.now() 不是响应式依赖。
侦听属性：观察和响应 Vue 实例上的数据变动。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。