第3章：vue生命周期及实例的属性

 

　　Vue的生命周期

　　vue的生命周期图示

 　　生命周期示例day02/03.html

	
	
	
	


	

		{{msg}}
		


		更新数据
		销毁组件
	

　　计算属性

　　1.基本用法

　　计算属性也是用来存储数据的，但具有以下几个特点　　

　　a.数据可以进行逻辑处理操作

　　b.对计算属性中的数据进行监视

　　计算属性取值不能向定义普通属性那样定义，需要定义函数，函数必须有返回值称为get值，调用的时候和普通属性是一样的{{}}

　　示例day02/04.html 

	
	
	
	


	

        
        
{{msg}}
        
{{msg2}}
	

　　假如想要把msg以空格为分隔符然后反向输出，下面有两种方法

　　1，在数据展示时进行逻辑处理

　　2，使用计算属性定义函数在函数内处理

　　示例

	
	
	
	


	

        
        
{{msg}}
        
{{msg2}}
        
        
        
{{msg.split(' ').reverse().join(' ')}}
        
        
{{reverseMsg}}

　　页面显示，两种处理方法效果是一样的　　

 　　2.计算属性 vs 方法

　　将计算属性的get函数定义为一个方法也可以实现类似的功能

　　区别：

　　　　a.计算属性是基于它的依赖进行更新的，只有在相关依赖发送改变时才能更新变化

　　　　b.计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

　　示例day02/04html 计算属性

	
	
	
	


	

        
        
{{msg}}
        
{{msg2}}
        
        
        
{{msg.split(' ').reverse().join(' ')}}
        
        
{{reverseMsg}}
        修改值

        
        
        测试
    
    

　　解析：函数fn是单独定义的不属于vue实例，点击测试时候调用，间隔1秒执行打印 vm.num2是打印计算属性

　　页面输出

 　　修改代码

　　调用方法输出而不是计算属性

console.log(vm.getNum2());
// console.log(vm.num2);

　　页面输出

 　　3,.get和set

　　计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性

　　默认只有get，如果需要set，要自己添加

　　计算属性赋值不能给自己赋值而需要给该计算属性依赖的值赋值，示例

	
	
	
	


	

        
        
{{msg}}
        
{{msg2}}
        
        
        
{{msg.split(' ').reverse().join(' ')}}
        
        
{{reverseMsg}}
        修改值

        
        
        测试
        
        
{{num2}}
        修改计算属性
    
    

　　解析：点击修改计算属性调用change2方法，在这个方法内给num2赋值给111，当出现赋值操作则调用该计算属性的set方法，传递的参数val就是change2中设置的的值111，但是不能在set方法内直接修改num2 的值，如果直接修改会因为重复调用溢出栈报错，需要修改的是是num1的值，因为num2依赖num1所以num2的值也修改了

　　页面显示

 

 　　四，vue实例的属性和方法

　　1.属性

vm.$el
vm.$data
vm.$options
vm.$refs

　　示例05.html

	
	
	
	


	

       {{msg}}
       
你好
       
世界
       

       
    
    

　　页面显示

　　2.方法

vm.$mount()
vm.$destroy()
vm.$nextTick()

vm.$set()
vm.$delete()
vm.$watch()

　　mount手动挂载实例

	
	
	
	


	

       {{msg}}
       
你好
       
世界
       

       
    
    

　　手动挂载的效果和以下代码效果是一样的

vm=new Vue({
			el:'#itany',
			data:{  
				msg:'welcome to itany',
			},
            name:'liuym',
            age:24,
            show:function(){
                console.log('show')
            },
        });

　　vm.$nextTick(callback)示例

　　vm.$nextTick(callback)在DOM更新完成后再执行回调函数，一般在修改数据之后使用该方法，以便能获取更新后的DOM

　　不使用nextTick在修改以后

	
	
	
	


	

       {{msg}}
       
你好
       
世界
       

       
标题：{{name}}
    
    

　　页面显示

 　　修改代码使用nextTick绑定在函数内执行

// console.log(vm.$refs.title.textContent);
        vm.$nextTick(function(){
            // DOM更新完成再执行此代码
            console.log(vm.$refs.title.textContent);
        });

　　页面显示

 　　方法

vm.$set(object,key,value)
vm.$delete(object,key)
vm.$watch(data,callback[,options])

　　set方法示例 day02/06.html

	
	
	


	

        修改属性
        添加属性
        

       
{{user.name}}
       
{{user.age}}
    
    

　　user本身没有age属性，使用doAdd方法添加这个属性，页面显示

 

 　　如果需要监控实时显示，修改代码使用set方法，修改方法doAdd()代码

 this.$set(this.user,'age',18);

　　页面显示

 　　以下代码是添加属性的全局方式，和上面代码实现的效果是一样的

Vue.set(this.user,'age',19)

　　一般情况下set方法不直接使用而是做一个判断再使用，例如需要从user中获取这个属性，如果有这个属性则给这个属性值+1，赋值设置这个属性值为1

 if(this.user.age){
    this.user.age++;
}else{
    Vue.set(this.user,'age',1);
 }

　　delete方法演示

　　06.html

	
	
	


	

        修改属性
        添加属性
        删除属性
        

       
{{user.name}}
       
{{user.age}}
    
    

　　页面显示

 　　watch方法示例

　　有两种方法监视数据day02/07.html

	
	
	


	

      
      
 {{name}}
      

      
      
 {{age}}
    
    

　　监视数据传递两个参数一个是修改后的新值一个是旧值

　　页面显示

 　　选项：deep 深度监视

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

　　示例,监听一个数组的变更

	
	
	


	

      
      
 {{name}}
      

      
      
 {{age}}
      

      
      
 {{user.name}}
    
    

　　解析：想要监控数组user的变更，但是页面显示，因为只是修改了数组user下面属性name的值，但是数组user对name属性的指向并没有变化，需要深度监视需要加deep选项

 　　修改代码如下

  // 深度监视
user:{
	handler:(newValue,oldValue) => {
	console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
	},
	deep:true //深度监视，当对象中的属性发生变化时也会监视
	}

　　页面显示

 　　newValue和oldValue指向的是同一个地址空间，值是修改之后的值，所以是一样的。