vue3.0中的响应式钩子是如何实现的

最新推荐文章于 2023-01-12 16:58:22 发布
最新推荐文章于 2023-01-12 16:58:22 发布
阅读量424 收藏 1
点赞数 2
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xfy196/article/details/116294708
版权

先来聊聊Vue3.0的变化

Vue3.0相比Vue2.0发生了翻天覆地的变化，从设计理念，到架构模式都发生了变化，笔者列入最核心的变化

  • diff设计变化，将dom渲染做到极致
  • 优化静态变量提升，提高无效的dom渲染
  • 监听缓存机制，让重复的数据流操作消失
  • 组合式的API，然代码的耦合度更低
  • 重写object.defineproperty()的数据双向绑定,使用Proxy代理重写

划重点，今天我们聊的只是基于Proxy实现的响应式代理

默认大家已经明白Proxy的原理是什么，如果大家还不太了解Proxy的原理先请大家移步阮一峰Proxy讲解

shallowReactive实现

首先我们先看看shallowReactive到底是个什么创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (暴露原始值)。(官网原话)。由此我们能得到这个hooks实现的只会代理第一层。

代码实现

function shallowReactive(obj){
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, val){
            obj[key] = val
            console.log("更新UI界面")
            return true
        }
    })
}
// 测试

let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = shallowReactive(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
// 只会代理第一层 所以只会出发一次更新ui操作
console.log(state) 
/*
更新UI界面
{ a: '1', gf: { b: '2', f: { c: '3', s: [Object] } } }
*/

shallowRef

概念 ：创建一个跟踪自身 .value 变化的 ref，但不会使其值也变成响应式的。

从官网的话中能够明白，实际上shallowRef与shallowReactive之间的区别就在于被value包裹了一层

代码实现:

function shallowRef(val){
    // 实现代码只需要shallowReactive拿过来那代理一次就可
    return shallowReactive({value: val})
}
function shallowReactive(obj){
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, val){
            obj[key] = val
            console.log("更新UI界面")
            return true
        }
    })
}
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = shallowRef(obj)
// state.value.a = '1'
// state.value.gf.b = '2'
// state.value.gf.f.c = '3'
// state.value.gf.f.s.d = '4'
// 修改里面的值不会发生改变只能监听第一层
state.value = {
    a: '1',
    gf: {
        b: '2',
        f: {
            c: '3',
            s: {
                d: '4'
            }
        }
    }
}
console.log(state)
/*
更新UI界面
{ value: { a: '1', gf: { b: '2', f: [Object] } } }
*/

shallowReadonly

概念：创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换 (暴露原始值)。

大致的意思就是只会做底层代理，同时这一层代理是不能够操作的, 其他层次的值可以修改但是不会被proxy代理

代码实现：

// shallowReadonly只需要set函数中不要设置值
function shallowReadonly(obj){
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, val){
            console.warn(`${key} 只读，不能赋值`)
            return true
        }
    })
}
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = shallowReadonly(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
// 只会代理第一层 所以只会出发一次更新ui操作
console.log(state)
/*
a 只读，不能赋值
{ a: 'a', gf: { b: '2', f: { c: '3', s: [Object] } } }
*/

reactive

概念：返回对象的响应式副本

和shallowReactive的区别是在于reactive是需要把所有的对象进行代理

代码实现:

// 产生递归监听
function reactive(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, value){
            obj[key] = value
            console.log("更新UI界面")
            return true
        }
    })
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = reactive(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
console.log(state)
/*
更新UI界面
更新UI界面
更新UI界面
更新UI界面
{ a: '1', gf: { b: '2', f: { c: '3', s: [Object] } } }
*/

ref

概念: 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

基于reactive就可以实现

function ref(obj){
    return reactive({
        value: obj
    })
}
function reactive(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, value){
            obj[key] = value
            console.log("更新UI界面")
            return true
        }
    })
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = ref(obj)
state.value.a = '1'
state.value.gf.b = '2'
state.value.gf.f.c = '3'
state.value.gf.f.s.d = '4'
console.log(state)
/*
更新UI界面
更新UI界面
更新UI界面
更新UI界面
{ value: { a: '1', gf: { b: '2', f: [Object] } } }
*/

readonly

概念：接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。只读代理是深层的：任何被访问的嵌套 property 也是只读的。

其实想要设置只读操作很简单，我们只需要在Proxy的set方法不去设置值即可

代码实现:

function readonly(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = readonly(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = readonly(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, value){
            console.log(`${key} 只读， 不能赋值`)
            return true
        }
    })
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = readonly(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
console.log(state)
/*
a 只读， 不能赋值
b 只读， 不能赋值
c 只读， 不能赋值
d 只读， 不能赋值
{ a: 'a', gf: { b: 'b', f: { c: 'c', s: [Object] } } }
*/

上面所述基本就是Vue3.0响应式hooks基本的实现原理，具体Vue3.0是如何完成数据双向绑定，dom渲染算法，请移步 Vue3.0

响应式的对象创建已经完成了，那么如何判断这个响应式对象的是那种类型创建的？

Vue3.0也提供了isRef, isReadonly,isReactive，isProxy这些判断函数

我们也来简单的实现一下，实现这个钩子可能我们需要重写一下上面实现的reactive和ref

isRef

概念：检查值是否为一个 ref 对象。

代码实现

function ref(target){
    target = reactive(target);
  // 这里我们需要重写对象的get，set方法，设置value的key
    return {
        // 标识当前对象时ref对象
        _is_ref: true,
        // 保存target数据保存起来
        _value: target,
        get value() {
            console.log('劫持得到了读取数据');
            return this._value
        },
        set value(value) {
            console.log("劫持到了修改数据，",
                value);
            this._value = value;
        }
    }

}
function reactive(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, value){
            obj[key] = value
            console.log("更新UI界面")
            return true
        }
    })
}
/**
 * 
 * 判断是否为ref
 * @param {*} target 
 * @returns 
 */
function isRef(target){
    return target && target._is_ref
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = ref(obj)
state.value.a = '1'
state.value.gf.b = '2'
state.value.gf.f.c = '3'
state.value.gf.f.s.d = '4'
console.log(isRef(state))
/*
劫持得到了读取数据
更新UI界面
劫持得到了读取数据
更新UI界面
劫持得到了读取数据
更新UI界面
劫持得到了读取数据
更新UI界面
true
*/

isReadonly

概念：检查对象是否是由 readonly

代码实现

function readonly(obj){
    // obj._is_readonly = true 第一种方法
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = readonly(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = readonly(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            // 第二种处理方式
            if(key === "_is_readonly") return true
            return obj[key]
        },
        set(obj, key, value){
            console.log(`${key} 只读`)
            return true
        }
    })
}
/**
 * 
 * 判断是否为readonly
 * @param {*} target 
 * @returns 
 */
function isReadonly(target){
    return target && target._is_readonly
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = readonly(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
console.log(state)
console.log(isReadonly(state.gf))
/*
a 只读
b 只读
c 只读
d 只读
{ a: 'a', gf: { b: 'b', f: { c: 'c', s: [Object] } } }
true
*/

isReactive

概念：检查对象是否是由 reactive

代码实现

function reactive(obj){
    // obj._is_reactive = true 这是一种方法

    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            // 这种第二种方法
            if(key === "_is_reactive") return true
            return obj[key]
        },
        set(obj, key, value){
            obj[key] = value
            console.log("更新UI界面")
            return true
        }
    })
}
/**
 * 
 * 判断是否为reactive
 * @param {*} target 
 * @returns 
 */
function isReactive(target){
    return target && target._is_reactive
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = reactive(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
console.log(isReactive(state.gf))

isProxy

概念：检查对象是否是由 reactive 或 readonly 创建的 proxy。

代码实现

function reactive(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    obj._is_reactive = true
    return new Proxy(obj, {
        get(obj, key){
            return obj[key]
        },
        set(obj, key, value){
            obj[key] = value
            console.log("更新UI界面")
            return true
        }
    })
}
/**
 * 
 * 判断是否为reactive
 * @param {*} target 
 * @returns 
 */
function isReactive(target){
    return target && target._is_reactive
}
/**
 * 
 * 判断是否为readonly
 * @param {*} target 
 * @returns 
 */
 function isReadonly(target){
    return target && target._is_readonly
}

function readonly(obj){
    if(typeof obj === "object"){
        if(obj instanceof Array){
            // 如果是一个数组，取出数组中的每一元素，判断每一个元素是否又是一个对象
            // 如果又是一个对象需要包装成一个proxy
            obj.forEach((item, index) => {
                if(typeof item === "object"){
                    obj[index] = reactive(item)
                }
            })
        }else {
            // 如果是一个对象取出对象属性的一个去吃没判断对象属性的取值也需要包装成Proxy
            for (const key in obj) {
                let item = obj[key]
                if(typeof item === "object"){
                    obj[key] = reactive(item)
                }
            }
        }
    }else {
        console.warn(`${obj} is not object`)
    }
    return new Proxy(obj, {
        get(obj, key){
            if(key === "_is_readonly") return true
            return obj[key]
        },
        set(obj, key, value){
            console.log(`${key} 只读， 不能赋值`)
            return true
        }
    })
}

function isProxy(target){
    return isReactive(target) || isReadonly(target)
}
// 测试
let obj = {
    a: 'a',
    gf: {
        b: 'b',
        f: {
            c: 'c',
            s: {
                d: 'd'
            }
        }
    }
}
let state = readonly(obj)
state.a = '1'
state.gf.b = '2'
state.gf.f.c = '3'
state.gf.f.s.d = '4'
console.log(isProxy(state.gf))

以上就是Vue3.0核心响应式对象创建和判断的方法了，关于Raw相关实现，比较简单就是保留了一份原始对象数据，具体实现后续会更新哈🤒

总结：听完VueConf大会尤大神对Vue3.0的解析，我才觉得自己对Vue3.0的理解还是比较浅薄的，关于上面代码实现基本结合尤大神的思想和Proxy的原理从零实现，也会完成自己手动封装一个类Vue的框架

小小荧
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Hooks 原理解析
baidulixueqin的博客
04-24 1768
Hooks 原理解析 内容 1.分析useState原理和源码 2.useRef的作用 3.useContext的作用 4.Vue3 对比 React 分析useState原理 import React from "react"; import ReactDOM from "react-dom"; const rootElement = document.getElementById("root"); function App() { console.log("App 运行了") const
Vue3生命周期Hooks的原理及其与调度器(Scheduler)的关系
小陈的博客
06-21 1694
Vue3的生命周期的实现原理是比较简单的，但要理解整个Vue3的生命周期则还要结合整个Vue的运行原理，又因为Vue3的一些生命周期的执行机制是通过Vue3的调度器来完成的，所以想要彻底了解Vue3的生命周期原理还必须要结合Vue3的调度器的实现原理来理解。同时通过对Vue3的调度器的理解，从而加深对Vue底层的一些设计原理和规则的理解，所以本文章的目标是理解Vue3生命周期Hooks的原理以及通过Vue3生命周期Hooks的运行了解Vue3调度器(Scheduler)的原理。Vue3的生命周期Hooks函
【Vue3】第六部分 自定义hook和toRef
Trees__的博客
03-17 579
【Vue3】第六部分 自定义hook和toRef 文章目录【Vue3】第六部分 自定义hook和toRef6. 自定义hook和toRef6.1 自定义hook6.2 toRef和toRefs6.2.1 toRef6.2.2 toRefs (常用)总结 6. 自定义hook和toRef 6.1 自定义hook 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让s
Vue3的生命周期，自定义hook，toRef（toRefs）
weixin_61774894的博客
06-09 298
Vue3的生命周期，自定义hook，toRef（toRefs）
vue-cli创建的项目中的gitHooks原理解析
10-15
主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3.0数据响应式原理详解
10-16
总的来说，Vue3.0的数据响应式原理是通过`Proxy`进行数据劫持，利用`Dep`和`ReactiveEffect`跟踪数据变化，以及`Composition API`简化组件逻辑，实现了高效的双向数据绑定。这一系列机制确保了Vue3应用能够在数据...
vue 3.0学习笔记(从入门到精通)
10-07
此外，Vue 3.0还支持`setup`函数，这是一个在组件实例创建之前执行的钩子，提供了更简洁的声明式API来处理数据和响应式逻辑。Vue 3.0的模板语法、响应式系统、事件处理和组件通信等方面都有所增强，使得开发者能够...
15分钟上手vue3.0(小结)
10-15
在响应式系统方面，Vue 3 使用了新的响应式原理——“Proxy-based Reactivity”，相比 Vue 2.x 中的 Object.defineProperty，它提供了更好的性能和更少的边界情况。此外，Vue 3 还引入了 `Teleport` 功能，它可以将...
精读《Vue3.0 Function API》
10-15
- `setup`函数是Vue 3.0 中的核心，它在组件实例创建时调用，允许开发者声明响应式状态、计算属性、方法和生命周期钩子。比如，`setup`函数中的`count`和`plusOne`是使用`value`创建的响应式状态，`computed`用于...
浅析 Vue 3.0 的组装式 API（一）
11-19
在 Vue 2.0 中，数据绑定的逻辑可能隐藏在构造参数和对象绑定的复杂性中，而在 Vue 3.0 中，开发者可以通过 `ref` 和 `reactive` 等 API 更直观地管理响应式数据。 接下来，我们详细介绍几个重要的响应式数据相关 ...
用 Proxy 简单实现 Vue 3 的 Reactive
三钻 - 之前端到全栈之路
12-09 7486
这里要给同学们分享的是 Proxy 与双向绑定，我们对大部分的 JavaScript 的这种基础库其实已经在其他文章中做过一些讲解了，或者是在我们编程的时候有所接触了。唯有这个 Proxy 我们之前是非常的回避的，因为在业务中也不太推荐大量的使用 Proxy。
onmounted vue3_Vue3.0 尝鲜 Hook TypeScript 取代 Vuex【项目实践】
weixin_39630247的博客
11-22 283
作者：ssh 前端从进阶到入院前言Vue3 Beta版发布了，离正式投入生产使用又更近了一步。此外，React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low，都在研究各种各样配合hook实现的新形状态管理模式。在React社区中，Context + useReducer的新型状态管理模式广受好评，那么这种模式能不能套用到 Vue3 之中呢？这篇文章就从Vue3的角度出发，探...
vue生命周期钩子函数总结以及在项目中的应用实例讲解
m0_59157023的博客
01-12 478
vue生命周期钩子函数总结
利用vue3提供的hooks实现响应式的全局状态共享
weixin_54000091的博客
05-24 4378
1.下面时useCart.ts这个hooks中的代码，其实挺简单的，用原生js也可以实现全局状态共享。但是使用原生的var或let，const声明的购物车变量由于数据不是响应式的，导致购物车数据发生改变页面不会响应式的变化。这里与原生的唯一的区别就是，只不过使用了vue提供的reactive方法将购物车变量转变为响应式的，当购物车发生变化时，页面也会随之响应式的发生改变 具体实现参考下面代码 useCart.ts中的代码 import { reactive } from "vue"; interface
Vue3中使用hooks，hooks究竟是个啥？如何理解
qq_21561833的博客
09-10 9473
最近被hooks这个词老是被提出，我经常听到但是又不会用，于是乎抽时间认真学习一下。
vue3中Hooks用法
m0_60899441的博客
10-03 2206
"hooks" 直译是 “钩子”，它并不仅是react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时刻时，会调用在该时机被注册的回调函数而在vue中。hooks的定义会更加模糊，姑且总结一下：在vue组合式API中被定义为,以"use" 作为开头的，一系列提供组件复用，状态管理等开发能力的方法。
Vue3-5-响应式数据处理
weixin_64925940的博客
05-25 2783
shallowReactive与shallowRef(浅拷贝),readonly与shallowReadinly(只读),toRaw与markRaw(转换为普通对象),toRef（新建对象）,customRef(自定义),provide与inject，响应式数据判断
Vue3 学习笔记 —— Hooks、全局函数和变量、Vue3 插件
Lyrelion的博客
12-04 4618
Vue3 学习笔记 —— Hooks、全局函数和变量、Vue3 插件
尚硅谷vue2.0 vue3.0笔记
最新发布
10-19
而Vue3.0的笔记则包括Vue3.0的响应式、Composition API、新的生命周期钩子、自定义hook函数等内容。此外，他们还提供了使用vue-cli和vite创建Vue项目的教程。如果你想深入学习Vue框架，可以考虑参考尚硅谷的Vue2.0和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值