计算属性和虚拟DOM的入门知识点-一一网

1、计算属性

复杂逻辑，模板难以维护，这时候计算属性就出现了，将部分模板中复杂的不适合写入的表达式放到计算属性（computed）中，也使得项目容易维护。

特点1：计算缓存和methods比较
- 计算属性是基于他们的依赖（一个或者多个data中的属性）进行缓存的。
- 计算属性会进行缓存，只有在它们的相关的依赖发生改变时才会重新求值。
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- computed中，属性都有一个get和一个set方法，当数据变化时，调用set方法。
特点2：计算属性和watch比较
- watch是侦听属性的，不支持缓存机制，监测一个data数据中的一个属性，数据发生变化，直接出发相应的操作。
- watch支持异步操作。
- 监听的函数支持接收两个参数，第一个参数是最新的值，第二个参数是之前输入的值。
- 当一个属性发生变化时，需要执行对应的操作。

案例1：

监听data中的myname属性，将后端返回的所有的名字中的首字母都变成大写的。

 //html
 <div id="main">
   {{myname}}
 </div>
 //js
 <script>
 let vm = new Vue({
   el: "#main",
   data: {
     myname: "hunhunzhang"
   }
 })
 </script>
 
 //在模板语法的情况下进行首字母操作
 {{myname.substring(0,1).toUpperCase() + myname.substring(1)}}
 //这个时候输出就是： Hunhunzhang，可以实现首字母大写操作。
复制代码

虽然可以实现将名字字符串首字母大写，但是有一个问题就是将很长的一段处理逻辑的代码放在模板语法中，就显得很乱，而且还不太好维护。这个时候，计算属性就被提出来了，在computed当中书写计算属性的代码，监听myname属性，并提供缓存，只要myname没有变化，就不会重新进行计算，而是利用之前缓存的值。

<script>
let vm = new Vue({
  el: "#main",
  data: {
    myname: "hunhunzhang"
  },
  computed: {
    getcapitalname(){
      return this.myname = this.myname.substring(0,1).toUpperCase() + this.myname
      .substring(1);
    }
  } 
})
</script>
{{getcapitalname}}
//这样在computed中书写计算属性的代码，然后将计算属性的函数名字放到模板语法中去
//就实现简洁 的对myname的运算，代码也容易维护。
复制代码

案例2：计算属性用于模糊查询

//计算属性用于模糊查询的案例是比通过@input事件监听要方便很多，因为计算属性的
//一个特性就是当其所依赖的数据发生变化的时候就会重新进行计算。
//html
<div id="main">
  <input type="text" v-model="mystr" />
  <ul>
    <-- 将计算属性的结果作为遍历的对象显示出来，一开始，没有输入就是空字符串
    所以过滤器返回的就是全部的datalist中的数据-->
    <li v-for="item in getmydatalist">{{item}}</li>
  </ul>
</div>
//js
<script>
let vm = new Vue({
  el: "#main",
  data: {
    mystr: "",
    datalist: ["aas","fafa","css","xds","ssx","bss","dff","efs"]
  },
  computed: {
    getmydatalist(){
      return this.datalist.filter(item=>item.indexOf(this.mystr)> -1)
    }
  }
})
</script>
//这个时候就可以实现了模糊查询  
复制代码

2、虚拟DOM初识

虚拟DOM

虚拟DOM的提出是前端进步不可抵挡的方向之一，就是为了提升浏览器的优的能力和提高网站的整体性能。虚拟DOM形象的比喻就是，如果一个网页中有一百次的dom操作，真实的DOM就会每更新一次就操作一次DOM，此时的浏览器就会重新渲染一次页面，那么一百次的DOM更改就会使得浏览器渲染一百次，这会让浏览器的性能大打折扣。这个时候虚拟DOM的诞生的意义就显得尤为重要了。