Vue-next 探究
前言
由于最近公司项目甚多，现在终于有点时间了，所以去看了一下vue-next（下一代vue.js 3.0），相信不久的将来vue3.0很快就要发布出来了。
这次是用TypeScript重构的，里面也新增了很多特性，如CompositionAPI，修改了数据响应式的实现方式等等，好的一点就是它是完全兼容2x的写法，而且在性能和速度上有显著的提升。
相关链接
vite：https://github.com/vitejs/vite
vue-next：https://github.com/vuejs/vue-next
vue-next-webpack：https://github.com/vuejs/vue-next-webpack-preview
vue Composition API：https://vue-composition-api-rfc.netlify.app/api.html
调试环境搭建
- 从GitHub上迁出vue3(vue-next)源码：
git clone https://github.com/vuejs/vue-next.git
- 安装依赖： 用yarn 加上–ignore-scripts会快很多
yarn --ignore-scripts
- 在package.json 文件中的script项中添加 --sourcemap 配置映射源码，⽣成sourcemap⽂件，以方便查看源码，
"dev": "node scripts/dev.js --sourcemap"
- 运行编译：
yarn dev
编译完成后得到如下js文件
packages\vue\dist\vue.global.js // vue.global.js 就是 vue3生成后的文件啦！
packages\vue\dist\vue.global.js.map
- 如果要调试范例代码就运行如下命令：
yarn serve
vue-next项目结构
源码位置是在packages目录中，实际上源码主要分为两部分，编译器 和 运⾏时环境。
-
编译器
-
compiler-core 核⼼编译逻辑
-
compiler-dom 针对浏览器平台编译逻辑
-
compiler-sfc 针对单⽂件组件编译逻辑
-
compiler-ssr 针对服务端渲染编译逻辑
-
-
运⾏时环境
-
runtime-core 运⾏时核⼼
-
runtime-dom 运⾏时针对浏览器的逻辑
-
runtime-test 浏览器外完成测试环境仿真
-
-
reactivity 响应式逻辑
-
template-explorer 模板浏览器
-
vue 代码⼊⼝，整合编译器和运⾏时
-
server-renderer 服务器端渲染
-
share 公⽤⽅法
初探Vue3
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-nexttitle>
<script src="../dist/vue.global.js">script>
head>
<body>
<div id="app">
<h1 @click="onclick">{{message}}h1>
<comp>comp>
div>
<script>
const { createApp } = Vue;
// vue实例化
const app = createApp({
components: {
comp: {
template: 'this is a component'
}
},
data: { message: 'Hello Vue3!' },
methods: {
onclick() {
console.log('ok 666');
}
},
}).mount('#app');
script>
body>
html>
Composition API
Composition API字⾯意思是组合API，它是为了实现基于函数的逻辑复⽤机制⽽产⽣的。
<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>Composition APItitle>
<script src="../dist/vue.global.js">script>
head>
<body>
<div id="app">
<h1>Composition APIh1>
<hr />
<div @click="add">点我试试: {{ state.count }}div>
<h3>toRefs解构后，前面不用加data啦: {{text}}h3>
<h3>{{time}}h3>
<h2>doubleCount: {{doubleCount}}h2>
div>
<script>
const { createApp, reactive, computed, watch, onMounted, toRefs } = Vue;
// 声明组件
const App = {
// setup是⼀个新的组件选项，它是组件内使⽤Composition API的⼊⼝
// 调⽤时刻是初始化属性确定后，beforeCreate之前
setup() {
// 数据响应式：接收⼀个对象，返回⼀个响应式的代理对象
const state = reactive({
count: 0,
// 计算属性 computed()返回⼀个不可变的响应式引⽤对象
// 它封装了getter的返回值
doubleCount: computed(() => {
return state.count * 2;
})
});
// 可以随处声明多个初始数据（在vue2中只能在data(){return{xxx:xxx}}）
const data = reactive({
text: 'Hello Vue-Next',
time: new Date().toLocaleTimeString()
});
//侦听器：watch()
// state.count变化cb会执⾏
watch(() => state.count, (newVal, oldval) => {
console.log('count变了:' + newVal);
});
onMounted(() => {
console.log('组件实例化完成啦！');
setInterval(function () {
data.time = new Date().toLocaleTimeString()
}, 1000);
})
// 添加事件：声明⼀个add函数
function add() {
state.count++
};
// 返回对象将和渲染函数上下⽂合并
return { state, ...toRefs(data), add }
}
};
createApp(App).mount('#app');
script>
body>
html>