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均可
- 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 更高。