《Petite-Vue源码剖析》结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦!
根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。
具体的使用方式请参考GitHub,在这里我想展示两个示例:
<style>
[v-cloak] {
display: none;
}
</style>
<div v-scope="App"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
App: {
$template: `
<span v-cloak v-if="status === 'offline'"> OFFLINE </span>
<span v-else> ONLINE </span>
`,
status: 'online'
}
}).mount('[v-scope]')
</script>
上述代码最终输出结果为 <div><span> ONLINE </span></div>
,但渲染过程是直接在DOM Tree上进行(分为如下4个步骤),当浏览器资源紧张时整个渲染过程将会被用户一览无余。
生成模板
<div>
<span v-cloak v-if="status === 'offline'"> OFFLINE </span>
<span v-else> ONLINE </span>
</div>
移除v-cloak
属性
<div>
<span v-if="status === 'offline'"> OFFLINE </span>
<span v-else> ONLINE </span>
</div>
解析v-if
和v-else
指令
<div>
<span v-if="status === 'offline'"> OFFLINE </span>
</div>
<div>
</div>
最终渲染
<div>
<span> ONLINE </span>
</div>
那么用户很有可能会看到闪屏现象:ONLINE => OFFLINE ONLINE => OFFLINE => EMPTY
=> ONLINE
<div v-scope="App"></div>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
const App = {
$template: `
<div v-scope="Counter(1)"></div>
<div v-scope="Message()"></div>
`
}
const Counter = initialCount => ({
$template: `
<span>{{ count }}</span>
<button @click="handleAdd">ADD</button>
`,
count: initialCount || 0
handleAdd() {
this.count += 1
}
})
const Message = () => {
$template: `<div>{{ Counter.name }}</div>`
}
createApp({
App,
Counter,
Message,
}).mount('[v-scope]')
</script>
petite-vue虽然没有提供明确的组件构建方式,但通过v-scope
属性我们依然可以采取组件化构建我们的页面。但上述例子有明显的问题
采取全局组件注册机制,如例子中即使Message
组件不需要还是能引用Counter
组件,假如注册的不是Counter
组件的构造函数,那么Counter
的状态将会被意外修改。
createApp({
Counter: Counter()
})
@vue/reactivity
源码食用,十分适合入门Vue源码。后续我们会以应用示例为入口,逐行阅读理解petite-vue和@vue/reactivity
,并实现自己的petite-vue和响应式系统,敬请期待:)
尊重原创,转载请注明来自:https://www.cnblogs.com/fsjohnhuang/p/15959708.html 肥仔John