vue改变内容------虚拟dom和diff算法

1、计算属性 computed

computed其实实质上就是一个拥有计算能力的属性，每次data里面的值发生改变时，都会调用一次computed里面的属性，简单点说，它就是将计算结果缓存起来的属性。以提升性能。例如

<body>
<div id="app">
  {{getCurrentTime()}}<!--当data里面的count值发生变化时getCurrentTime里面的方法不会随之变化-->

  {{getCurrentTime1}}<!--当data里面的count值发生变化时getCurrentTime1里面的属性也会随之变化-->
  {{count}}
  </p>
</div>
</body>

<script>
 var vm =  new Vue({
    el:"#app",
    data:{
      count:0
    },
    methods:{
        getCurrentTime(){
         return new Date();
        }
      },
    computed:{
      getCurrentTime1(){
        return new Date();
      }
      }


  })

  setInterval(function() {
    vm.count++;  //频繁改变data的值
  },1000)
</script>

2、watch方法：

通过watch给属性值绑定函数，当属性值发生变化时，函数就会被自动调用，调用时可以得到两个参数，第一个参数是改变后的参数，第二个参数是改变前的参数。例如：

<body>
<div id="app">
  {{title}}
  <input type="text" v-model="title">
  {{oldvalue}}
  {{newvalue}}

</div>
</body>


</script>
<script>
 var vm =  new Vue({
    el:"#app",
    data:{
      title:"hello 幻想",
      oldvalue:"hello 幻想",
      newvalue:"hello 幻想"
    },
   watch:{
      title(newValue,oldValue){
        console.log("title changed");
       this.oldvalue = oldValue;
       this.newvalue = newValue;
      }
   }
  })
  
</script>

3、vue改变样式：

（1）通过给html元素里面css样式的属性绑定vue的属性值得到样式的动态绑定。例如：

<style>
  .mydiv{width: 100px;height: 50px; position: relative; margin-bottom: 20px; background-color: gray}
  .red{background-color: red;}
  .yellow{background-color: yellow;}
  .green{background-color: green;}
</style>
<body>
<div id="app">
  <div v-bind:class="{red: temp}" class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>

  <input type="button" value="点我" @click="temp=!temp"><!--取反-->

</div>
</body>

<script>
 var vm =  new Vue({
    el:"#app",
    data:{
      temp:false
    }

  })

</script>

（2）通过computed可以返回一个对象，对象里面可以放着对个键值对。例如：

<div id="app">
  <div v-bind:class="{red: temp}" class="mydiv"></div>
  <hr/>
  <div :class="myclassStyle" class="mydiv"></div>
  <hr/>
  <div class="mydiv"></div>

  <input type="button" value="点我" @click="temp=!temp">

</div>
</body>

<script>
 var vm =  new Vue({
    el:"#app",
    data:{
      temp:false
    },
   computed:{
      myclassStyle(){
        return {
          red:this.temp,
          mywidth:this.temp
        }
      }
   }

  })

</script>

(3)、通过vue里面的data的键值动态绑定元素属性，例如：

<style>
  .mydiv{width: 100px;height: 50px; position: relative; margin-bottom: 20px; background-color: gray}
  .red{background-color: red;}
  .yellow{background-color: yellow;}
  .mywidth{
    width: 450px;
  }
  .green{background-color: green;}
</style>
<body>
<div id="app">
  <div v-bind:class="{red: temp}" class="mydiv"></div>
  <hr/>
  <div :class="myclassStyle" class="mydiv"></div>
  <hr/>
  <div :class="mycolor" class="mydiv"></div>


  <input type="text" v-model="mycolor" /><!--此时input里面可以输入预设的css里面的class名进行动态绑定class-->

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
 var vm =  new Vue({
    el:"#app",
    data:{
      temp:false,
      mycolor:"green"
    }
  

  })

</script>

 (4)、通过vue绑定多个元素属性：当需要绑定多个class名时，我们需要使用数组来进行绑定。例如：

<style>

    .mydiv{width: 220px;height: 100px;background-color: gray;}
    .mywidth{width: 450px;}
    .red{background-color: red;}
</style>
<body>
<div id="app">
    <div class="mydiv" :class="[mycolor,mw]" ></div>
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com',
            mw:"mywidth",
            mycolor:"red"
        }



    });

</script>

(5)、vue绑定内嵌css样式（指定style的值）：

<style>

    .mydiv{width: 220px;height: 100px;background-color: gray;}
    .mywidth{width: 450px;}
    .red{background-color: red;}
</style>
<body>
<div id="app">
    <div class="mydiv" :class="[mycolor,mw]" ></div>

    <div class="mydiv" :style="{backgroundColor:mv}" ></div>

 <!--注意：style引用了Vue的内容，因此是一个键值对，所以需要大括号，对象的键是不能使用“-”来表示的，因此需要将background-color改成backgroundColor-->

 

</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com',
            mw:"mywidth",
            mycolor:"red",
            mv:"blue"
        }



    });

</script>

 

（6）、使用computed改变属性：道理其实都是一样的，只不过把直接获取data的值计算了一下拿出来了而已。例如：

<div class="mydiv" :style="myStyle" ></div>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com',
            mw:"mywidth",
            mycolor:"red",
            mv:"blue",
            bggreen:"green",
            somewidth:"500"
        },
        computed:{
            myStyle(){
                return {
                    backgroundColor: this.bggreen,
                    width:this.somewidth + "px"
                }
            }
        }



    });

</script>

（7）、使用多种样式混合（数组）：例如：

<style>

    .mydiv{width: 220px;height: 100px;background-color: gray;}
    .mywidth{width: 450px;}
    .red{background-color: red;}
</style>
<body>
<div id="app">
    <div class="mydiv" :class="[mycolor,mw]" ></div>

    <div class="mydiv" :style="{backgroundColor:mv}" ></div>
    <!--注意：style引用了Vue的内容，因此是一个键值对，所以需要大括号，对象的键是不能使用“-”来表示的，因此需要将background-color改成backgroundColor-->
    <div class="mydiv" :style="[myStyle,{width:2* somewidth + 'px'}]" ></div>

   宽度： <input type="text" v-model="somewidth">
   颜色：<input type="text" v-model="bggreen">
</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            link:'https://www.baidu.com',
            mw:"mywidth",
            mycolor:"red",
            mv:"blue",
            bggreen:"green",
            somewidth:"500"
        },
        computed:{
            myStyle(){
                return {
                    backgroundColor: this.bggreen,
                    width:this.somewidth + "px"
                }
            }
        }



    });

</script>

 4、虚拟dom和diff算法：

vue能如此高效的原因，其实就是使用了虚拟dom和diff算法，vue不是直接通过操作dom元素来实现修改页面的效果，而是直接在页面上修改元素，原理就是通过diff算法来计算出虚拟的dom，对虚拟的dom进行计算修改前和修改后的区别，然后再渲染到页面上，我们都知道直接操作dom属性时非常消耗时间和性能的，而操作js对象却非常的方便，所以这么做可以提升性能。