vue改变内容------虚拟dom和diff算法
1、计算属性 computed
computed其实实质上就是一个拥有计算能力的属性，每次data里面的值发生改变时，都会调用一次computed里面的属性，简单点说，它就是将计算结果缓存起来的属性。以提升性能。例如
<body> <div id="app"> {{getCurrentTime()}} {{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" /> 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>
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> <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对象却非常的方便，所以这么做可以提升性能。