Vue生命周期，计算属性，监听

vue的八大生命周期钩子函数

执行顺序: beforeCreate>created>beforeMount>mounted

    new Vue({
            el:'#app',
            data:{ 
                 msg:'我爱Vue'
                 }
            //Vue实例化对象创建之前
            //实例化对象创建之前是获取不到data里面的数据的
            beforeCreate() {
                console.log('beforCreate',this.msg);
           },
           
            //Vue实例化对象创建之后
            //实例化对象创建之后可以获取data里面的数据
            //实例化对象创建之后不可以获取到dom包括根节点
            created() {
                console.log('created',this.msg,this.$el);
            },
            
            //Vue的dom挂载之前
            //dom挂载之前可以获取到根节点
            beforeMount() {
                console.log('beforeMount')
            },
            
            //Vue的dom挂载之后
            //★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素
            mounted() {
                console.log('mounted');
            },
            
            //Vue的data值更新前
           beforeUpdate() {
               console.log('beforeUpdate');
            },
            
            //Vue的data值更新之后
            updated() {
                console.log('updated')
            },
            
            //Vue组件的销毁前
      //★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用
            beforeDestroy() {
                console.log('beforeDestoyr')
            },
            
            //Vue组件的销毁后
            destroyed() {
                console.log('destroyed');
            },
        })

计算属性

• 计算属性具有缓存的功能
• 当data里面的数据值被改变的时候 计算属性缓存的内容才会被刷新

<div id="app">
 <h1>{{priceV}}</h1>
</div>
  new Vue({
            el:'#app',
            data:{ 
               price:1000.00000001,
                 },
           computed:{
               priceV:function(){
                   return '￥'+this.price.toFixed(2)
              toFixed会把数字转成字符串 参数是用来保留几位小数 并四舍五入
              }
           }   

监听属性watch

• 只要data中的值被改变了就会被触发
• 如果监听的是计算属性 计算属性里面的data属性里面的值例如value
• 发生了改变，才会触发监听器

    new Vue({
        //挂载点
        el:'',
        //数据
        data:{
        price：''
        },
       watch:{
       值的属性需要和data中的属性相对应
       第一个参数newV表示最新的值 第二个参数oldV表示之前的值
          price:function(newV,oldV){
            Console.log(‘原参数’+oldV+’----’+’新参数’+newV)
                }
            }
      })

深度监听

• 基本数据类型可以使用简写的方式
• 引用数据类型使用简写的方式无效 可以改用对象的方式 加deep:true深度监听
• handler方法名是固定不可以被修改
• immediate:true 会立即执行监听器里面的handler方法

       watch:{
              obj:{
                        deep:true,
                        handler(newV,oldV){
                           console.log(newV);
                            console.log('值被改了');
                        },
                        immediate:true
                    }
                },


也可以''简单粗暴的方式监听对象里面的值
'obj.value':function(){
                    console.log();
                }