vue实例属性方法，生命周期，数据绑定，computed和watch，原生指令

一、实例上的属性

app.$data：传进去的内容

app.$props：当前组件接收到的props 对象

app.$el：HTML节点

app.$options：Vue里面的选项，option对里面的数据修改是没有作用的

app.$options.render：赋值是有作用的，不过要等下一次有值发生变化，重新渲染时，才会发生变化

app.$options.render = (h) =>{
return h('div',{},'new render function')
}

app.$root：整个vue最上层的根节点

app.$root === app

app.$children

<item><div>app.$children</div></item>

app.$slots

app.$scopedSlots

app.$refs 模板引用

app.$isServer

二、实例上的方法

app.$watch：监听值的变化

const unWatch = app.$watch('text',(newText,oldText) => {
})

注销的方法：unWatch()；

在组件里面的写法

watch:{
        text(newText,oldText){
            console.log('${newText}:${oldText}')
        }
}

watch：没用的时候要销毁掉，不然会导致内存溢出。

通过watch属性放的，app用完后会自己注销。

事件监听：

app. $on('test',(a,b) =>{ console.log('test emited$ {a} ${b}');
});

${}：字符串模板

$emit 触发事件，同一个对象，可以传数据

app.$emit('test',1,2)

$on的区别

$once:只监听一次

vue响应式框架

app.$forceUpdate();重新渲染，会强制一直重新渲染，导致性能不好。

app.$set(app.obj,'a',i)重新赋值

app.$delete

app.$nextTick：vue是异步渲染，希望每次对dom节点的操作，都渲染出来。

三、vue 组件/对象的生命周期

lifecycle.png

初始化
beforeCreate(){} // 这个时候不要去修改数据
created(){} // 最早可以修改数据的地方
挂载在dom的过程
beforeMount(){}
mounted(){}
数据更新时执行
beforeUpdate(){}
updated(){}
跟组件相关
activated(){}
deactivated(){}
销毁实例
beforeDestroy(){}
destroyed(){}
本组件发生错误
renderError(h,err){
return h('div',{},err.stack)
}
errorCaptured 会向上冒泡，并且正式环境可以使用
errorCaptured(){
}

四、vue的数据绑定

new Vue({
   el:'#app',
   data:{
      isActive:false,
      aaa:'main',
      arr:[1,2,3],
      style:{
          color:'red',
          appearance:'none'  // vue会根据浏览器帮我们判断把需要加前缀的加上前缀  比如谷歌浏览器加 -webkit-  火狐加 -moz-
      },
      style2:{
          color:'black'
      },
      html:'<span>123</span>'
   },
// template举例一
   template:`
      <div v-bind:id='aaa'  v-on:click='handleClick' >//简写:id='aaa'  @click='handleClick'
        {{ isActive ?  'active' : 'not active' }} // 可以进行单个运算、二元运算
         // {{ arr.join()  }}
         // {{ getJoinedArr(arr) }} 这里可以用方法
         // {{ Data.now() }}
         //  在模板里面的，绑定在this上的所有值和自建白名单里的全局变量可以访问。
        <p v-html='html'></p>// 会转义字符串，防止注入攻击之类的
      </div>
   `,
  // template举例二 
  // 还可以:class='{active:!isActive}'，或者数组的写法 <div :class="[ isActive ? 'active' : ' ' ]" >     <div :class=" [ { active : isActive } ]" >  
    template:`
      <div  :class='{active:isActive}'  :style='[style,style2]'> 
      </div>
    `,
    methods:{
      handleClick(){
         alert('clicked');
      },
      getJoinedArr(arr){
         return  arr.join(' ')
      }
    }  
})

五、vue的 computed 和 watch

new Vue({
    el:'#app',
    data:{
         firstName:'Jokcy',
         lastName:'Lou',
         number:0,
         fullName:"",
         obj:{
           a:'123'
         }
    },
    template:`
      <div>
        <span>Name : {{ firstName + ' ' + lastName }}</span>
        // <span>Name : {{ name }}</span>
        // <span>Name : {{ getName() }}</span>
        <span>Number:{{ number }}</span>
        <p>
          <input type='text'  v-model="number" >
        </p>
        <p>{{ fullName }} </p>
      </div>
    `,
     computed:{
      // computed 有缓存，避免每次都重新计算，拿到的数据改变的时候，才会重新计算。
       name (){
         return `${this.firstName}  ${this.lastName}`
       }
      // 可以做设置的操作，一般不建议做，computed 主要是组合值、数据的拼装，拆开再设值的时候就很复杂。 get()  set()
    },
    methods:{
      // 模板里面可以调用方法, 如果有重新计算的话，就用computed方法能节省缓存。
       getName(){
         return `${this.firstName}  ${this.lastName}`
       }
    },
    watch:{
       // 尽量不要改监听的相关的属性
       // 最初绑定的时候不会执行 监听数据的变化后，再做一个指定的操作
       // 可以用作监听值的变化，然后给后台发一个请求
       firstName(newName,oldName){
          this.fullName = newName + " " + lastName
       }
       // 如果要一开始就要执行，如下操作，一般不建议使用
       firstName:{
         handler (newName,oldName){
           this.fullName = newName + " " + lastName
         },
         immediate:true,  // 要记得声明这个
       },
       obj:{
          handle(){
             console.log('obj.a changed')
        },
       immediate:true,
       deep:true  // 深入观察，可以监听到obj下面的所有属性都遍历了一遍，这样性能开销很大。
       },
      // 优化方法：在字符串里面写对象的深入属性调用，会一层层解析，知道取到最终点后面的属性
      'obj.a':{
          handle(){
             console.log('obj.a changed')
          },
          immediate:true
       }
    }
})

六、vue原生指令

所有的指令都是以 v-开头，有些有缩写。

v-text
v-html
v-show => display:none 如果只是控制显示和隐藏，推荐v-show
v-if => 不存在文档流里面因为动态增删节点会引起dom的重绘和重新排版，导致性能差。
v-else => 节点的上一个兄弟节点必须加 v-if ，不然会报错。
v-else-if => 从上往下判断。
v-for => 遍历数组的使用方法

data:{
    arr:[1,2,3],
    obj:{
        a:'123',
        b:'456'.
        c:'789'
    }
}

<ul>
    <li v-for="item in arr"  :key >{{ item }}</li>
    // 循环出来的列表需要加key，唯一指定的循环数列的值，最好用取到的唯一的id做key的值，因为数据会经常变化，如果每次变化都重新去渲染列表再放到dom里面去，性能开销会比较大，指定key之后，下次再循环的时候会从缓存里面拿到同样的key会把这行dom节点复用，不用重新生成dom节点，这样性能开销会比较少。推荐不要用index作为key，有可能会导致错误的缓存。
</ul>

<ul>
    <li v-for='(item , index) in arr '>{{ item }} :{{ index }}</li>
</ul>

<ul>
    <li v-for="(val,key,index) in obj">{{ val }}:{{ key }} : {{ index }}</li>
</ul>

v-on : 事件系统，事件绑定，其实就是在vue对象的实例上绑定这个事件。
v-bind
v-model :默认只能用在 input 节点上面。或者绑定turn或false。
v-model.number : 转化为数字
v-model.trim : 去掉首尾的空格，有中间的空格。
v-model.lazy : v-model 默认在input里面绑定的是input事件，改变input事件，变成onchange事件。
v-pre : 不会执行里面的表达式，写什么就解析什么。
v-cloak : 在代码没有加载完成之前，可以先加一个样式，代码加载完成后会被去掉。display：none；
v-once : 只执行一次，只有静态html时，不需要再解析和更新。

注意：默认情况下，我们在dom上面的value都是字符串，如果需要变成数字，前面加bind
<input type = 'checkbok' :value='1' v-model='arr' >