Vue3快速入门之Vue3与Vue2区别

码农阿茹

已于 2022-08-10 21:15:03 修改

阅读量236

点赞数

文章标签： javascript vue.js 前端

于 2022-08-10 21:03:24 首次发布

本文链接：https://blog.csdn.net/m0_69674158/article/details/126273472

版权

本文介绍了Vue3的响应式原理，通过proxy实现，并对比Vue2的Object.defineProperties方式。深入探讨setup组件、ref、reactive、computed、watch与watchEffect的用法。同时，详细阐述了Vue3与Vue2在启动方式、全局方法定义、模板根组件以及生命周期上的变化。

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

VUE3响应式原理

vue3是基于ES6新增的proxy代理实现的
vue3官网

一：setup组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。

注意：在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取。

以下实例使用组合 API 定义一个计数器：

实例（src/APP.vue）
<template>
    <div>
        <p>计数器实例: {
   {
    count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>

<script>
import {
   ref, onMounted} from 'vue';

export default {
   
    setup(){
   
        //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI
        let count = ref(0);

        // 定义点击事件 myFn
        function myFn(){
   
            console.log(count);
            count.value += 1;