vue3响应式api

响应式api------compositon api

setup:

  1. 不要再想this 问题
  2. 执行是在beforeCreated之前

beforeCreated:也就是创建了一个实例

created:挂载了数据

  1. 通过形参props接收,只读

以后所有代码都写到setup中

判断是否只读:isReadonly

挂载到template中:

  1. 挂载到this 上的
  2. 或者windows上的一些全局对象

setup return的数据能在template中使用

局部组件:导入-注册-调用

全局组件:Vue.component Vue.use

状态 ref

计算属性computed

计算缓存

方法method

直接定义一个方法,然后return出去

setup会产生一个闭包:状态、计算属性都给存起来,通过作用域链拿过来使用。setup只会执行一次,只会在初次渲染时执行;改值->视图更新,但视图更新时setup不会再执行。跟react的区别:每次组件更新都会产生新的私有上下文,产生好几个闭包每个从头走一遍。

data computed methods 一项项选项

解构出对应函数

状态reactive

reactive:对整个对象做代理和劫持

get/set/deleteProperty/has/ownKeys

toRefs&toRef

监听器 watch

过滤器:各种限制:语法、传参,性能也没有比方法好多少

watchEffect:

初渲染会执行一次

watch中要避免死循环

总结:

如何创建状态,属性+监听器+普通方法,核心响应式系统

toRef/toRefs

从setup 到属性 到状态 计算属性 监听器

相关推荐
用户4099322502126 分钟前
为什么Vue 3的计算属性能解决模板臃肿、性能优化和双向同步三大痛点?
前端·ai编程·trae
海云前端17 分钟前
Vue首屏加速秘籍 组件按需加载真能省一半时间
前端
蛋仔聊测试9 分钟前
Playwright 中route 方法模拟测试数据(Mocking)详解
前端·python·测试
零号机20 分钟前
使用TRAE 30分钟极速开发一款划词中英互译浏览器插件
前端·人工智能
疯狂踩坑人44 分钟前
结合400行mini-react代码,图文解说React原理
前端·react.js·面试
Mintopia1 小时前
🚀 共绩算力:3分钟拥有自己的文生图AI服务-容器化部署 StableDiffusion1.5-WebUI 应用
前端·人工智能·aigc
街尾杂货店&1 小时前
CSS - transition 过渡属性及使用方法(示例代码)
前端·css
CH_X_M1 小时前
为什么在AI对话中选择用sse而不是web socket?
前端
Mintopia1 小时前
🧠 量子计算对AIGC的潜在影响:Web技术的未来可能性
前端·javascript·aigc
街尾杂货店&1 小时前
css - word-spacing 属性(指定段字之间的间距大小)属性定义及使用说明
前端·css