@TOC
![]()
鎮(zhèn)樓圖--殺生丸.jpg
鎮(zhèn)樓圖--殺生丸.jpg
image.png
作者上篇文章已經(jīng)對ue2.0響應(yīng)式的一個原理做了比較詳細(xì)的介紹，但2019年10月5日椿争，尤小右公開了 Vue 3.0 的源代碼。源碼地址：vue-next熟嫩，至于vue預(yù)版本的優(yōu)勢在github都接下來就讓我給各位看官大佬介紹一個這個3.0前的一些內(nèi)容吧秦踪；
vue-next(vue3.0預(yù)體驗)
由于vue-next并不是最終的版本，目前有一些尤大神在知乎上尤小右 3.0 RFC曝光的一些api尚無包含邦危，就目前版本而言，還是能體驗一下未來版本使用舍扰；下載好vue-next
- 首先執(zhí)行
npm i
npm run dev
- 現(xiàn)版本執(zhí)行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做響應(yīng)
// 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>
-
執(zhí)行表現(xiàn)如下:
vue3.0.gif -
控制臺輸出如下圖:
控制臺輸出.png
2.vue-next的目錄結(jié)構(gòu)
image.png
1 編譯時:
- compiler-core : 編譯時一些核心模塊倦蚪，不分平臺， 比如v-if v-for v-model等 存放于這個目錄下;
- compiler-dom : 基于compiler-core編譯時一些dom的方法边苹，如 v-html陵且，v-text等，編譯成瀏覽器能識別的東西个束；
2 運行時：
- runtime-core :運行時一些核心api慕购，如創(chuàng)建組件的createComponent、創(chuàng)建vDOM的createRenderer等茬底；
- runtime-dom : 主要包含基于runtime-core生成瀏覽器支持的dom的方法等沪悲；
3 響應(yīng)式核心：
- reactivity : 核心！下個版本的vue不再使用Object.defineProperty做響應(yīng)式處理阱表，而是通過proxy
做響應(yīng)式;
proxy的優(yōu)勢: Proxy 對象用于定義基本操作的自定義行為(如屬性查找殿如，賦值贡珊，枚舉，函數(shù)調(diào)用等)涉馁。1.相較于Object.defineProperty门岔，proxy可以直接監(jiān)聽對象而非其屬性，并返回一個新對象烤送。2.可以直接監(jiān)聽數(shù)組的變化寒随；3
3. reactive內(nèi)部實現(xiàn)
- 通過vue3.0的源碼及現(xiàn)有的一些文檔可知: 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>
未完待續(xù)~ 原來19年寫的文章忘記發(fā)布了啊
