vue 的方法，计算属性，侦听器，非响应式的解决方法

v-for:

  1\  遍历数组：***********

            <li v-for="item in personList"   :key="item.id">
                 姓名：{{item.name}}-----年龄：{{item.age}}
           </li>

      <li v-for="(item,index) in personList" :key="index">

      如果在修改或添加数组元素时，不打乱数组的元素位置，就可以用  index作为key值。否则就只能用其他的不重复的字段来做key，比如 :key="item.id"

 2\遍历对象：
      <div v-for="(pvalue,pkey) in product" :key="pkey">
           {{pkey}}---{{pvalue}}
      </div>

 3\遍历字符串
   <li v-for="(s,index) in str" :key="index">{{s}}---{{index}}</li>

4\ 遍历数字 

            <li v-for="(n,index) in 20" :key="index">
                {{n}}
            </li>

--------------------
计算属性：
    通过已有的属性计算得来的属性。它与data中的属性用法一样。
    计算属性具有缓存功能。

   完整的计算属性：
   computed:{
                fullName:{
                    get(){ //访问时，自动调用get()
                        console.log("计算属性中")
                        //采用小驼峰。
                      let uname=this.firstName.toLowerCase()+this.lastName.substr(0,1).toUpperCase()+this.lastName.substr(1).toLowerCase();
                      return uname;  
                    },
                    set(val){//当修改时，自动调用set()
                         console.log("被修改了"+val);
                    }
                }

            }

   
   当没有修改时，就不写set().没有set时，就可以简写:

          fullName(){

          }
          

  监听：watch

       watch监听data里面的属性或计算属性：
       watch:{
          属性名:{
             hanlder(newV,oldV){  

             },
             immediate:true,//初始化时就执行一次，默认是false,
             deep:true  //  要进行深度监听时，必须是true.默认是false
          }

          //如果监听中只有handler，可以简写：
          ||
         属性名(newV,oldV){

         }
       }

       也可以写在外面：

      let unWatch=   vm.$watch("属性名",function(newV,oldV){
            // unWatch();  取消监听
         },{immediate:true,deep:true})

    在vue中并非所有的语句都是响应式的。

      1、数组如果是通过下标来操作的就不是响应式的。
         this.nums[0]=100;  非响应
   
      数组提供的方法，就是响应式的

      vue单独提供了一个set方法专门解决非响应式的问题。

      this.$set(要修改的数组,下标,新值);

      2、对象：
        添加一个属性：非响应式
        this.tst.t="111"

           解决方法：  this.$set(对象名,"属性名",值)

        修改已有属性的值：是响应式的。

        vm.$set( target, propertyName/index, value )

     
       删除对象中的属性：
            delete this.tst.n;    非响应式

           解决方法： this.$delete(对象/数组, 属性名/index);