vue小结

data:

组件的定义只接受 function。,but,why?

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

如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(…)) 得到深拷贝的原始数据对象

注意，如果你为 data 属性使用了箭头函数，则 this 不会指向这个组件的实例

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义

生命周期：

beforeMount，mounted，beforeUpdate，updated，activated，deactivated，beforeDestroy，destroyed：这些钩子在服务器端渲染期间不被调用。

activated，deactivated：keep-alive 组件激活和停用时调用

总结：

1、el在beforeMount才能取到

2、dom在mounted才能取到，故要操作dom必须在这个生命周期

3、data在created才能取到，调接口、赋值在created和beforeMounted,mounted均可

1. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

5.created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

watch：

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：（当我刚进入页面就想触发watch的时候可以使用这个）

vm.$forceUpdate()：

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

vm.$nextTick( [callback] )(待研究？)

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它

的实例上。

v-show：（第一次渲染后一直存在于页面，只不过是否显示而已）

根据表达式之真假值，切换元素的 display CSS 属性。

当条件变化时该指令触发过渡效果

v-if：（并不是一直存在于页面，性能低）

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是  ，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。