vue3.0响应式源码实践,vue3.0初体验_vue 3.0实践-程序员宅基地
技术标签： vue
vue3.0响应式源码实践,vue3.0初体验
作者上篇文章已经对ue2.0响应式的一个原理做了比较详细的介绍，但2019年10月5日，尤小右公开了 Vue 3.0 的源代码。源码地址：vue-next，至于vue预版本的优势在github都接下来就让我给各位看官大佬介绍一个这个3.0前的一些内容吧；
vue-next(vue3.0预体验)
由于vue-next并不是最终的版本，目前有一些尤大神在知乎上尤小右 3.0 RFC曝光的一些api尚无包含，就目前版本而言，还是能体验一下未来版本使用；下载好vue-next
- 首先执行
npm i
npm run dev
- 现版本执行npm run dev 会直接打包文件在dist目录下面
1. 使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="vue.global.js"></script>
<script>
console.log('Vue====',Vue)
const App = {
setup() {
// reactive state
let count = Vue.reactive({value:1}) // 知乎上尤大大推荐的是使用 const count = value(0) 但目前这个版本是没有value的 先用reactive做响应
// computed state
const plusOne = Vue.computed(() => count.value * 2)
// method
const increment = () => {
count.value++
}
// watch
Vue.watch(() => count.value * 2, val => {
console.log(`value * 2 is ${val}`)
})
// lifecycle
Vue.onMounted(() => {
console.log(`mounted`)
})
// expose bindings on render context
return {
count,
plusOne,
increment
}
},
template: `
<div>
<div>count is {
{ count.value }}</div>
<span>plusOne is {
{ plusOne }}</span>
<button @click="increment">count++</button>
</div>
`,
}
Vue.createApp().mount(App,app)
</script>
</body>
</html>
- 执行表现如下:
- 控制台输出如下图:
2.vue-next的目录结构
1 编译时:
- compiler-core : 编译时一些核心模块，不分平台， 比如v-if v-for v-model等 存放于这个目录下;
- compiler-dom : 基于compiler-core编译时一些dom的方法，如 v-html，v-text等，编译成浏览器能识别的东西；
2 运行时：
- runtime-core :运行时一些核心api，如创建组件的createComponent、创建vDOM的createRenderer等；
- runtime-dom : 主要包含基于runtime-core生成浏览器支持的dom的方法等；
3 响应式核心：
- reactivity : 核心！下个版本的vue不再使用Object.defineProperty做响应式处理，而是通过proxy
做响应式;
proxy的优势: Proxy 对象用于定义基本操作的自定义行为(如属性查找，赋值，枚举，函数调用等)。1.相较于Object.defineProperty，proxy可以直接监听对象而非其属性，并返回一个新对象。2.可以直接监听数组的变化；3
3. reactive内部实现
- 通过vue3.0的源码及现有的一些文档可知: vue3后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="vue.global.js"></script>
<script>
let obj = Vue.reactive({value:1});
Vue.effect(()=>{
console.log(obj.value)
})
obj.value += 1
</script>
</body>
</html>
未完待续~ 原来19年写的文章忘记发布了啊
智能推荐
Conflux观点 | 被吹爆的Facebook Libra白皮书，Out了-程序员宅基地
文章浏览阅读388次。“为全球数十亿人提供简单、无国界的货币和金融基础设施”的宏大愿景，加上“《财富》500 强或管理资产 10 亿美元以上，以及每年在多个国家/地区为超过2000万人提供服务..._state machine replication in the libra blockchain
通信系统对如何绘制误码率曲线的思考-程序员宅基地
文章浏览阅读7k次，点赞4次，收藏49次。1：信噪比SNR、EsN0、EbN0 转化关系 Es,N0,EsN0,EbN0,SNR关系详解_Cowrie168的博客-程序员宅基地_ebn0和snr重点公式：SNR = EbN0 + 10log10(nBits*coderate) - 10log10(0.5or1 * upfactor);note：转化关系出错会导致与理想误码率之间相差3db2：验证绘制误码率曲线与理想误码率一致性 方式一：matlab中有通过bertool 工具绘制相应常规的调制方式的误码率..._误码率曲线
几个最短路径算法Floyd、Dijkstra、Bellman-Ford、SPFA的比较_请设计测试dijkstra算法,floyd算法,bellman-ford算法性能的python代码,-程序员宅基地
文章浏览阅读1.4k次。几个最短路径算法的比较：Floyd 求多源、无负权边的最短路。用矩阵记录图。时效性较差，时间复杂度O(V^3)。 Floyd-Warshall算法（Floyd-Warshall algorithm）是解决任意两点间的最短路径的一种算法，可以正确处理有向图或负权的最短路径问题。Floyd-Warshall算法的时间复杂度为O(N^3)，空间复杂度为O(N^2)_请设计测试dijkstra算法,floyd算法,bellman-ford算法性能的python代码,三种算法各
AI 虚拟试衣 论文汇总-程序员宅基地
文章浏览阅读240次。猜您喜欢：深入浅出stable diffusion：AI作画技术背后的潜在扩散模型论文解读戳我，查看GAN的系列专辑~！一顿午饭外卖，成为CV视觉的前沿弄潮儿！最新最全100篇汇总！生成扩散模型Diffusion ModelsECCV2022 | 生成对抗网络GAN部分论文汇总CVPR 2022 | 25+方向、最新50篇GAN论文ICCV 2021 | 35个主题GAN论文汇总超110篇！C..._ai试穿论文参考文献近三年怎么写
SpringBoot+Mybatis+MySQL实现读写分离_springboot+mybatisplus+mysql主从读写分离-程序员宅基地
文章浏览阅读218次。在Springboot中使用数据库主从复制实现读写分离，操作数据时操作主表，查询操作使用从表。我就直接跳过创建SpringBoot应用的步骤了，直接开始操作如何配置读写分离。1、我的Maven依赖如下，大家可以复制<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema..._springboot+mybatisplus+mysql主从读写分离
搜索引擎有哪些，搜索引擎网站大全_链接搜索引擎-程序员宅基地
文章浏览阅读9.1k次。通过搜索引擎网站搜索，可以帮助我们快速找到自己需要的内容。很多同学只知道百度搜索，不知道还有其他什么搜索引擎网站。小编就来和大家分享搜索引擎网站有哪些，搜索引擎网站大全。_链接搜索引擎
随便推点
STM32 USB HID Mouse And Keyboard (guide)_motion wakeup-程序员宅基地
文章浏览阅读921次。There is apost (STM32 And Custom USB HID Device? Yes Please!)that gets a lot of attention, although at the time it was created, only vague “how-to” was presented. I decided to break down this to smaller parts of modifying STM32 USB HID code, generated ..._motion wakeup
圆角按钮_mfc按钮设置圆角-程序员宅基地
文章浏览阅读413次。2013-05-24 12:45 1197人阅读 评论(0) 收藏 举报[cpp] view plaincopyprint? 第一步：往项目中添加MyButton.h 和MyButton.cpp 两个文件。第二步：然后将自己需要的BitMap文件导入。第三步：在项目工程的CARMDlg::OnInit_mfc按钮设置圆角
java中的Volatile_java 保守优化 激进优化 volatile-程序员宅基地
文章浏览阅读142次。目录Volatilehappens-before你的打赏是我奋笔疾书的动力！Volatile 掌握好Volatile的概念是理解Doug Lea的AQS的前提，如果你学习AQS的时候，不想一脸茫然和胸塞虚竹的话，还是先来看一下JMM（java内存模型）对volatile的写和读的内存语义的描述。 volatile写和锁的释放有相同的内存语义..._java 保守优化 激进优化 volatile
vue及rect面试点(更新中) - 面试篇_vue rect-程序员宅基地
文章浏览阅读1.2k次。文章目录一、事件的执行顺序阻止事件冒泡的方式二、事件循环 EventLoop三、异步编程的方法1.回调函数2.事件监听3.发布/订阅 ｜ 观察者模式4.Promise 对象5.Generator 函数6.async 与 await四、call、apply、bind 的区别call fn.call(obj, 1, 2);apply fn.apply(obj, [1, 2]);bind fn.bind(obj, 1, 2);五、vue 和 react 中不被渲染出来的标签六、js 里 for..in 和 for_vue rect
设计模式--工厂方法模式（FactoryMethod）_工厂方法模式的结构图示例如下图所示。-程序员宅基地
文章浏览阅读942次。工厂方法模式（FactoryMethod）在现实生活中社会分工越来越细，越来越专业化。各种产品有专门的工厂生产，彻底告别了自给自足的小农经济时代，这大大缩短了产品的生产周期，提高了生产效率。同样，在软件开发中能否做到软件对象的生产和使用相分离呢？能否在满足“开闭原则”的前提下，客户随意增删或改变对软件相关对象的使用呢？这就是本节要讨论的问题。工厂方法模式的定义与特点工厂方法（Factor..._工厂方法模式的结构图示例如下图所示。
ES深分页、浅分页_es中scroll分页原理-程序员宅基地
文章浏览阅读3.8k次。ES深分页、浅分页_es中scroll分页原理