手写Vue2.0源码（十）-计算属性原理

最新推荐文章于 2024-04-21 02:48:42 发布

IT-小马哥

最新推荐文章于 2024-04-21 02:48:42 发布

阅读量444

点赞数 1

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/james324/article/details/116289638

版权

本文详细介绍了Vue2.0计算属性的实现原理，包括计算属性的初始化、属性劫持、Watcher的改造以及依赖收集的过程，帮助读者深入理解计算属性如何根据依赖变化自动更新，并提供了一个思维导图作为总结。

摘要由CSDN通过智能技术生成

前言

此篇主要手写 Vue2.0 源码-计算属性

适用人群：

1.想要深入理解 vue 源码更好的进行日常业务开发

2.想要在简历写上精通 vue 框架源码（再也不怕面试官的连环夺命问哈哈）

3.没时间去看官方源码或者初看源码觉得难以理解的同学

正文

<script>
  // Vue实例化
  let vm = new Vue({
    el: "#app",
    data() {
      return {
        aa: 1,
        bb: 2,
        cc: 3,
      };
    },
    // render(h) {
    //   return h('div',{id:'a'},'hello')
    // },
    template: `<div id="a">hello 这是我自己写的Vue{
  {computedName}}{
  {cc}}</div>`,
    computed: {
      computedName() {
        return this.aa + this.bb;
      },
    },
  });
  // 当我们每一次改变数据的时候  渲染watcher都会执行一次 这个是影响性能的
  setTimeout(() => {
    vm.cc = 4;
  }, 2000);
  console.log(vm);
</script>

上述例子就是计算属性的基础用法我们在两秒之后改变了模板里面的 cc 但是计算属性依赖的 aa 和 bb 都没变化所以计算属性不会重新计算还是保留的上次计算结果

1.计算属性的初始化

// src/state.js

function initComputed(vm) {
  const computed = vm.$options.computed;

  const watchers = (vm._computedWatchers = {}); //用来存放计算watcher

  for (let k in computed) {
    const userDef = computed[k]; //获取用户定义的计算属性
    const getter = typeof userDef === "function" ? userDef : userDef.get; //创建计算属性watcher使用
    // 创建计算watcher  lazy设置为true
    watchers[k] = new Watcher(vm, getter, () => {}, { lazy: true });
    defineComputed(vm, k, userDef);
  }
}

计算属性可以写成一个函数也可以写成一个对象对象的形式 get 属性就代表的是计算属性依赖的值 set 代表修改计算属性的依赖项的值我们主要关心 get 属性然后类似侦听属性我们把 lazy:tr