跳至主要內容
VUE3的数据响应式是如何实现的？（四）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是下篇的下篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上一篇中，我们修复了代码遗留的两个BUG，分别是：

Jeacson She...大约 7 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（一）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是上篇。

参考: Vue Mastery-Vue3 Recativity

从简单的模板开始讲起

让我们首先创建一个简单的 Vue App 以及一个html模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<body>
    <div id = "app">
        <div>Price: ${{ price }}</div>
        <div>Total: ${{ price * quantity}}</div>
        <div>Taxes: ${{ totalPriceWithTax }}</div>
    </div>
    
</body>


<script>
    let vm = new Vue({
        el: '#app',
        data: {
            price: 5.00,
            quantity: 2
        },
        computed: {
            totalPriceWithTax() {
                return this.price * this.quantity * 1.03
            }
        },

    })
</script>

</html>
Jeacson She...大约 11 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（三）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是下篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上一篇中，为了实现数据响应式，我们使用了Reflect 与 Proxy 两个 ES6 的新语法，让它看起来越来越像我们希望了解的Vue3语法：

Jeacson She...大约 15 分钟VUEWebVUE3advanced
VUE3的数据响应式是如何实现的？（二）

简述

这里会从源码实现原理，向你介绍VUE3是如何实现数据响应式的。这里是中篇。

参考: Vue Mastery-Vue3 Recativity

上篇回顾

在上篇中，为了实现数据响应式我们对自己的代码进行了三次改装，让它看起来越来越像常见的响应式引擎：

Jeacson She...大约 11 分钟VUEWebVUE3advanced
VUE基础

实现页面数据拼接的三种方法

  1. 插值语法实现:
...
   <body>
    <div id="root">
        姓：<input type="text" v-model="SurName">
        <br><br>
        名：<input type="text" v-model="GivenName">
        <br><br>
        全名： <span>{{SurName}}-{{GivenName}}</span>


    </div>
  </body>
...
  <script>
    Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

    new Vue({
      el: "#root",
      data: {
        SurName: 'She',
        GivenName: "Jeacson",
      },
      ...
    });
  </script>
Jeacson She...大约 2 分钟VUEWebVUE2basic
Vue3 中 watchEffect 函数的简单使用

在 vue3 中， watchEffect 函数是跟踪响应依赖关系的方法之一。本质上，watchEffect 函数等同于使用响应式属性编写了一个方法，每当这个方法中的任何值随着用户操作得到更新时，该方法就会执行。

例：

import { ref, watchEffect } from 'vue'
export default {
    setup() {
        let observed = ref(0);

        watchEfect(() => {
            let monitor = observed * 2;
            console.log('检测到 observed 受用户操作改变.');
            console.log(`其中observed值为${observed}`);
            console.log(`monitor值为${monitor}`);
        })

        return {
            observed
        }
    }

    
}
Jeacson She...大约 2 分钟VUEWebVUE3
Vue3 与 Vue2 在数据响应式上的区别

一、Vue3 与 Vue2 在对象数据响应式上的区别

在 vue2 中，所有数据在底层都是通过使用Object.defineProperty()进行劫持后实现数据响应的。这使得如果一个数据为对象时，vue 无法对这个对象里面的元素进行监听，导致对象里的值无法实现响应式。

let o = {};

Object.defineProperty(o, 'prop1' {
    //使属性可删除
    configurable: true,
    //有人读取o的某个属性时调用
    get() {
        return object.prop1;
    },
    //有人修改o的某个属性时调用
    set(value) {
        object.prop1 = value;
    }
})

Object.defineProperty(o, 'prop2' {
    //使属性可删除
    configurable: true,
    //有人读取o的某个属性时调用
    get() {
        return object.prop2;
    },
    //有人修改o的某个属性时调用
    set(value) {
        object.prop2 = value;
    }
})
......
Jeacson She...大约 3 分钟VUEWebVUE3COMPARE
Vue3 与 Vue2 在渲染函数上的区别

在编写vue代码时，我们一般会首先在template标签中编写html代码。当我们进行代码编译时，VUE首先会根据代码内的各个标签将代码转换为若干个虚拟DOM节点，也就是VNode (VirtualDomNode)，然后它会将多个 Vnode 结合，将其转化为VirtalDOM，最后VDOM才会被渲染成真实的DOM。大部分的情况都会是如此。

但是如果我们可以跳过代码转换节点的过程，直接编写生成vnode的代码，会使得浏览器编译代码的效率更高。此时我们可以在script标签内使用渲染函数render(), 并在其中调用VUE中的函数h()。h函数中调用了createElement函数（Vue3中使用的是createVnode函数） 进行结点的创建，但是只是在这之上进行了传入参数的条件判断，所以我们也可以称其为createElement函数/createVnode函数。

Jeacson She...大约 2 分钟VUEWebVUE3COMPARE
Vue3 与 Vue2 在watch上的区别

在VUE2中，watch作为选项存在。我们可以通过使用 watch 选项在每次响应式属性发生变化时触发函数。

export default {
  data() {
    return {
      question1: ''，
      question2: ''，
    }
  },
  watch: {
    // 每当 question1 改变时，这个函数就会执行 (简写方式)
    question1(newValue, oldValue) {
      console.log('question1 Changed!', newValue, oldValue);
    }，
    question2: {
        deep: true,// 开启深度监听
        immediate: true, // 开启时立即监听
        handler(newValue, OldValue) {
            console.log('question2 Changed!', newValue, oldValue);
        }
    }
  },
}
Jeacson She...大约 2 分钟VUEWebVUE3COMPARE
VUERouter

简述

这里是当时学习vue-router时产出的相关笔记。目前已经从图片版本完全整理为可供阅览的电子格式。

零、简述

0.1 什么是路由？

路由是一组 key-value 的映射关系，可以理解为键值对。

0.2 什么是路由器？

路由器是管理多个路由的东西。

0.3 为何使用路由器？

为了实现“SPA应用” => 特点：页面不刷新，组件分别出

0.4 What is "VUERouter" ?

Jeacson She...大约 14 分钟VUEWebVUE2Router