Vue基础知识简介3

Vue生命周期(创建 挂载 更新 销毁)

beforeCreate（做遮罩层，显示loading转圈圈） function beforCreate(){ alert("实例刚刚创建，并未进行数据观测和事件配置") //创建前状态,el和data并未创建初始化 } created function created(){ alert("实例已经完成创建,已进行数据观测和事件配置"); //常用 创建完成状态,data数据已经初始化,el没有 } beforeMounte function beforeMounted(){ alert("模板编译之前，还未进行挂载"); //挂载前状态 data 和el已经初始化 } mounted（与后台 进行对接、从后台 获取的数据显示）     function mounted(){ alert("模板编译之后，已经完成挂载状态，才会有渲染数据，页面上才会显示数据"); //常用 模板挂载结束状态 已经完成挂载 } berforeUpdate(vue2.0后增加的) function beforeUpdate(){ alert("组件更新前"); //更新之前状态 } updated(vue2.0后增加的) function updated(){ alert("组件更新之后"); //更新之后状态 } beforeDestroy function beforeDestroy(){ alert("组件销毁之前"); //销毁之前状态 } destroyed function destroyed(){ alert("组件销毁之后"); //销毁之后状态 } <div id="my"> {{msg}} <br/> <button @click="update">更新组件</button> <button @click="destroy">销毁组件</button> </div> data:{ msg:"hello"; } methods:{ update(){ this.msg="更新数据"; } destroy(){ this.$destroy(); } } 钩子函数 事件劫持机制，用来对事件比较早的处理，说的简单的一点就是把vue内部的一些事件，进行一些别的配置 computed计算属性(引用缓存，用来存储和处理数据) <div id="my"> <p>{{reverseMsg}}</p> </div> data:{ msg:"hello world" } computed:{ reverseMsg:function(){ return this.msg.split(' ').reverse().join(''); } } 计算属性的获取，走到里面的get方法 <button @click="change2()">change2</button> data:{ num1:200; }, methods:{ change2(){ console.log(this.num2); } }, computed:{ num2:{ get:function(){ return this.num1-1; }, set:function(val){ this.num1=val;//不能直接修改对应的计算属性 this.num2=val } } } 计算属性的好处 计算属性有一个缓存的机制在里面，如果多次查看，引用的数据没有发生变化，只会调用一次get方法 有缓存，只掉一次get请求，好处是性能会比较好，不好的是有时候数据可能没有发生变化 可以在js里随机去一个数据，去判断是否数据发生变化， 可以css/js加上版本号或者时间戳 这个是浏览器缓存，浏览器缓存机制 <script type="text/javascript" src="js/changeDis.js?ver=122445.v"></script>