一、Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段)
1、beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用,即实例已经创建了但是数据还没有监视,事件也还没有配置。
2、示例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue生命周期</title> <script src="js/vue.js"></script> <script> window.onload=function(){ let vm=new Vue({ el:'#itany', data:{ msg:'welcome to itany' }, methods:{ update(){ this.msg='欢迎来到南京网博!'; }, destroy(){ // this.$destroy();//销毁实例对象,即销毁组件,组件存放在内存中的数据被回收了。 vm.$destroy(); } }, beforeCreate(){ alert('组件实例刚刚创建,还未进行数据观测和事件配置'); }, created(){ //常用!!! alert('实例已经创建完成,并且已经进行数据观测和事件配置'); }, beforeMount(){ alert('模板编译之前,还没挂载'); }, mounted(){ //常用!!! alert('模板编译之后,已经挂载,此时才会渲染页面,才能看到页面上数据的展示'); }, beforeUpdate(){ alert('组件更新之前'); }, updated(){ alert('组件更新之后'); }, beforeDestroy(){ alert('组件销毁之前'); }, destroyed(){ alert('组件销毁之后'); } }); } </script> </head> <body> <div id="itany"> {{msg}} <br> <button @click="update">更新数据</button> <button @click="destroy">销毁组件</button> </div> </body> </html>
3、vue生命周期图--对应的八个钩子函数
二、 计算属性
1、 基本用法
1、计算属性也是用来存储数据,但具有以下几个特点:
特点1:数据可以进行逻辑处理操作
特点2:对计算属性中的数据进行监视
2、计算属性 和方法的区别
将计算属性的get函数定义为一个方法也可以实现类似的功能但是之间的区别就在于:
区别1:计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化
区别2:计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存的计算结果,不会多次执行,而方法是不会缓存的,每调用一次都会从新执行函数。
区别3:方法是只是某个功能,计算属性是数据要计算和更新。
3、计算属性的组成
1、计算属性由两部分组成:get和set,分别用来获取计算属性和设置计算属性
2、默认只有get,如果需要set,要自己添加
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <!-- 1.基本用法 --> <h2>{{msg}}</h2> <h2>{{msg2}}</h2> <!-- 对数据处理再显示 --> <h2>{{msg.split(' ').reverse().join(' ')}}</h2> <h2>{{reverseMsg}}</h2> <button @click="change">修改值</button> <!-- 2.计算属性 vs 方法 --> <!-- <h2>{{num1}}</h2> <h2>{{num2}}</h2> <h2>{{getNum2()}}</h2> --> <button onclick="fn()">测试</button> <!-- 3.get和set --> <h2>{{num2}}</h2> <button @click="change2">修改计算属性</button> </div> <script> var vm=new Vue({ el:'#itany', data:{ //普通属性是个字面量形式 msg:'welcome to itany', num1:8 }, computed:{ //计算属性是一个函数形式 msg2:function(){ //该函数必须有返回值,该函数的返回值就是你属性的值,该函数用来获取属性值,称为get函数 return '欢迎来到南京网博'; }, reverseMsg:function(){ //可以包含逻辑处理操作,同时reverseMsg依赖于msg return this.msg.split(' ').reverse().join(' '); }, num2:{ get:function(){ console.log('num2:'+new Date()); return this.num1-1; }, set:function(val){ //val=111, // console.log('修改num2值'); this.num1=val; } } }, methods:{//方法直接写函数 change(){ // this.msg='i love you'; this.num1=666; }, getNum2(){ console.log(new Date()); return this.num1-1; }, change2(){ this.num2=111; //会自动执行num2的set函数,将111这个值传给num2 } } }); function fn(){ setInterval(function(){ // console.log(vm.num2); console.log(vm.getNum2()); },1000); } </script> </body> </html>