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

小小荧 小小荧 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 524平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-03-25 06:41:31 发布 524 阅读 AI 写同款· GEO 优化 ›
Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0） 每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化。 阅读详情

先来聊聊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的框架

收录于
前端

当前文章被收录于：

前端
48 篇文章 1 人学习
订阅专栏 查看详情
标签
#vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
从前慢-Vue3 Vue3 1 认识Vue3 1) 了解相关信息 Vue.js 3.0 "One Piece" 正式版在今年9月份发布 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR Vue3支持vue2的大多数特性 更好的支持Typescript 2) 性能提升: 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% 使用Proxy代替defineProperty实现数据响应式 重写虚拟DOM的实现和Tree-Shaking 3) 新增特性 Composition (组合) A 阅读详情

相关推荐

vue-cli创建的项目中的gitHooks原理解析

主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vue3的生命周期，自定义hook，toRef（toRefs）

Vue3的生命周期，自定义hook，toRef（toRefs）

weixin_61774894的博客 479

Open5GS实战：从零搭建树莓派5G核心网并与商用终端联调

本文详细介绍了如何在树莓派5上从零开始搭建基于Open5GS的5G核心网，涵盖系统准备、依赖安装、源码编译、关键配置修改及服务启动全流程。通过整合SDR基站与商用终端进行端到端联调，为开发者和研究者提供了一个低成本、可实践的5G网络实验平台，助力物联网与边缘计算应用的本地化测试与验证。

weixin_29194255的博客 157

利用vue3提供的hooks实现响应式的全局状态共享

1.下面时useCart.ts这个hooks中的代码，其实挺简单的，用原生js也可以实现全局状态共享。但是使用原生的var或let，const声明的购物车变量由于数据不是响应式的，导致购物车数据发生改变页面不会响应式的变化。这里与原生的唯一的区别就是，只不过使用了vue提供的reactive方法将购物车变量转变为响应式的，当购物车发生变化时，页面也会随之响应式的发生改变 具体实现参考下面代码 useCart.ts中的代码 import { reactive } from "vue"; interface

weixin_54000091的博客 5563

华为OD机试 新系统 双机位C卷 往年真题 机考题库（持续收录中）以及算法考点详解

每一题都有详细的答题思路、详细的代码注释、样例测试，发现新题目，随时更新，全天优快云在线答疑。

学Java，找哪吒 7万+

RFSoC全面解析（八）—— ZCU111 RFSoC评估工具的上位机界面

下面的内容的参考文献为：XILINX公司文档UG1287。 XILINX公司提供了一个RFSoC的ADC/DAC性能的评估工具或者叫评估系统，这个文档就是讲如何使用这个评估工具的。 整个评估系统总的框图如上图所示，评估系统由上位机、ZCU111开发板、子卡以及网线、射频线缆组成。 ZCU111开发板内主要使用的RFSoC外设为时钟驱动和DDR4，RFSoC的PS部分和PL部分都使用了。 PS部分发挥的功能为通过网口与上位机通信，通过IIC总线控制时钟驱动芯片以及数据流控制等；PL部分发挥的功能为

4378

Vue3中使用hooks，hooks究竟是个啥？如何理解

最近被hooks这个词老是被提出，我经常听到但是又不会用，于是乎抽时间认真学习一下。

qq_21561833的博客 1万+

基于C#开发ABB机器人上位机系统：从操作控制到数据交互的全方位实现

ABB工业机器人是世界领先的自动化设备之一，广泛应用于焊接、装配、搬运、喷涂、包装等多个行业。机器人控制器：用于控制机器人运动、路径规划、状态监控等。上位机系统：提供人机交互界面，允许操作员与机器人进行交互，实现实时控制、参数调整和数据分析。上位机系统通过与机器人控制器通信，采集机器人状态数据，发送控制指令，实现远程监控和控制操作。通过高效的操作界面和数据交互，可以大大提高机器人的工作效率和系统的可维护性。基于C#开发ABB机器人上位机系统，能够实现高效的机器人控制与实时数据交互。

这里只有干货：从 Modbus 通信到 MES 对接，从 YOLO 训练到工控机部署，带你搞定工业软件开发全流程。 1177

Vue3生命周期Hooks的原理及其与调度器(Scheduler)的关系

Vue3的生命周期的实现原理是比较简单的，但要理解整个Vue3的生命周期则还要结合整个Vue的运行原理，又因为Vue3的一些生命周期的执行机制是通过Vue3的调度器来完成的，所以想要彻底了解Vue3的生命周期原理还必须要结合Vue3的调度器的实现原理来理解。同时通过对Vue3的调度器的理解，从而加深对Vue底层的一些设计原理和规则的理解，所以本文章的目标是理解Vue3生命周期Hooks的原理以及通过Vue3生命周期Hooks的运行了解Vue3调度器(Scheduler)的原理。Vue3的生命周期Hooks函

小陈的博客 1913

yolov5直接调用zed相机实现三维测距（python）

zed代码比较简洁，但是一定要把环境配置好，后续自己会把他当做普通双目标定，去对比分析效果，并完善相关功能。

积极向上的mr.d的博客 1万+

效果炸裂_安装midscene_copw基于midscene操作电脑_基于视觉的软件测试执行_MIDSCENE的安装和使用---AI大模型应用探索0012

摘要：本文介绍了如何通过安装MidSceneJS来增强Copaw的屏幕操作能力。首先需要安装Node.js和npm，并配置淘宝镜像源加速安装。然后全局安装MidScene CLI工具（npm install @midscene/cli -g）。接着配置视觉大模型服务，通过设置环境变量指定模型API密钥、名称、基础URL和家族类型（如qwen3.5-27b），配置文件需存放在C:\Users\Administrator.copaw目录。安装成功后，MidScene已能成功识别并操作屏幕，使用效果良好。文中还提

添柴程序猿的专栏 638

vue3的基本使用(超详细)

2020年9月18日，vue3发布3.0版本，代号大海贼时代来临，One Piece特点：无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 Web Components 嵌入单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL，甚至是命令行终端中的界面什么是hook函数： 本质是一个函数，把setup函数中使用的Composition API进行了封装类似于vue2.x中的 mixin。......

luofei_create的博客 15万+

73、结合无人机进行rk3588oak-lite跟踪目标物体进行识别、跟踪

搭建仿真转换模型环境，主要python版本和我下载的rknn2的版本。截取shape节点，输出模型。so库也要对应转模型的whl。其中安装的whl版本。

sxj731533730 1623

Vue3.x快速上手（二）Vue3.x的生命周期和响应式原理

Vue2.0和Vue3.x的生命周期对比 Vue2.0 Vue3.x Vue3.x生命周期钩子函数 <div id="app"> <input type="number" v-model='num'> <button @click='handleUnmount'>销毁</button> </div> <script> const {createApp,reactive,...

qq_33070437的博客 294

大模型选型实战：为OpenClaw匹配最优“大脑”的全维度考量

大模型不是越贵越好，也不是参数越高越好，适合自己的使用场景才是最好的。按照我的方法，先明确自己的需求，再选对应的模型，配置多模型自动路由，既能保证体验，又能最大限度降低成本。我自己用这套配置用了半年多，不管是写文章、写代码还是处理复杂问题，都完全够用，成本也很低，大家可以参考一下。如果不知道选什么模型，可以在评论区说一下你的使用场景。

专注于Python爬虫开发，分享爬虫技巧、项目实战与反爬经验，使用Scrapy、BeautifulSoup等工具，解决数据抓取难题。 343

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Vue3 尚硅谷-张天禹

观看尚硅谷张天禹老师做的Vue3笔记

ACBYCL的博客 2354

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

Vue3.0知识点

1.拉开序幕的setup 理解：Vue3.0新配置项，值为一个函数 setup是所有 Composition API(组合API) “表演的舞台” 组件中所用到的：数据，方法等等，均要配置在setup中 setup函数的两种返回值： 若返回一个对象，测对象中的属性，方法，在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容 注意点： 尽量不要与vue2.x配置混用 Vue2.x配置（data, methods, computed…）中可以访问到se

qq_38780194的博客 1105

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

快速上手vue3.0

vue3.0 环境安装 安装最新vue脚手架 npm i @vue/cli -g 通过脚手架创建项目，并选择3.0 vue create vue-next 运行项目 npm run serve vue3.0 组合式api vue2.0采用的叫做选项式api： 例如我们想实现某一个功能，关于这个功能的数据我们会定义在data中，事件函数定义在methods中，计算属性定义在computed中…, 实际上我们想实现一个功能会把我们代码拆分写到不同的模块中，这样我们很难区分，哪个数据和哪个逻

搬砖猴哥 1640

vue3.0与vue2.0的区别

Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。有更快的渲染速度：Vue 3.0在虚拟DOM和响应式系统方面进行了优化，可以实现更快的渲染速度。有更小的代码体积：Vue 3.0采用了Tree-shaking技术，可以消除未使用的代码，从而减小应用程序的体积。有更高的容错性：在Vue 3.0中，模板编译错误会抛出编译期错误而不是运行时错误，从而更早地发现问题。

qq_40946635的博客 1万+

一口气速通Vue3.0

更适合大型项目，需要高度定制化的构建流程，以及对成熟生态依赖较高的情况；

慈様 1417

笔记：Vue 3.0

笔记：Vue 3.0

我才是真的李成贤的博客 1539

vue3.0 api 的简单学习

vue3.0 出来了一段时间了，但是直到这一段时间，才想着要认真学一学，真是惭愧Vue 组合式 API 1、上手 下载 官方的 vue3.0 的一个包 git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3 cd vue3 yarn yarn dev 2、API 学习 1、setup函数 这个函数完全就是 vue3.0 的核心了，也是所有函数的入口 export default { ...

dongcehao的博客 1995

vue2.0的Object.defineProperty和vue3.0的reactive注意点

Object.defineProperty

renfeideboke的博客 887

vue3.0学习记录

1、优化点 相较vue2.0，vue3.0主要有以下变化 1、性能优化 打包体积减少约40%，首次渲染速度减少50%，更新渲染速度减少130%，内存占用减少约50% 2、使用proxy代替defineProperty实现响应式 3、更好的支持ts 4、优化生命周期，增加setup,ref,reactive等新的概念 2、composition API 1、setup 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以

czz19910404的博客 761

Vue3笔记

学习vue3的全部笔记

qq_67519713的博客 186

承接vue2-＞vue3的一些变动

vue

qq_47848696的博客 937
上一篇： TailWind css 与 React框架结合使用
下一篇： 原来Redux的原理这么简单
点赞 2
评论 0
书签 书签 1
小小荧
小小荧
博客等级 码龄9年 133粉丝 92原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值