Vue-next 探究

最新推荐文章于 2024-05-28 11:16:05 发布

MuGuiLin

最新推荐文章于 2024-05-28 11:16:05 发布

阅读量1k

点赞数

分类专栏： Vue.js 文章标签： vue vue-next vue3 vuejs vue3.0

本文链接：https://blog.csdn.net/muguli2008/article/details/107561024

版权

Vue.js 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

前言

由于最近公司项目甚多，现在终于有点时间了，所以去看了一下vue-next（下一代vue.js 3.0），相信不久的将来vue3.0很快就要发布出来了。
这次是用TypeScript重构的，里面也新增了很多特性，如CompositionAPI，修改了数据响应式的实现方式等等，好的一点就是它是完全兼容2x的写法，而且在性能和速度上有显著的提升。

调试环境搭建

从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

<!DOCTYPE html>
<html lang="en">

	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>vue-next</title>
	    <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: '<div>this is a component</div>'
					}
				},
				data: { message: 'Hello Vue3!' },
				methods: {
					onclick() {
						console.log('ok 666');
					}
				},
			}).mount('#app');
		</script>
		
	</body>
</html>

Composition API

Composition API字⾯意思是组合API，它是为了实现基于函数的逻辑复⽤机制⽽产⽣的。

<!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>Composition API</title>
	    <script src="../dist/vue.global.js"></script>
	</head>
	
	<body>
	    <div id="app">
	        <h1>Composition API</h1>
	        <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>

MuGuiLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-next 探究

前言由于最近公司项目甚多，现在终于有点时间了，所以去看了一下vue-next（下一代vue.js 3.0），相信不久的将来vue3.0很快就要发布出来了。这次是用TypeScript重构的，里面也新增了很多特性，如CompositionAPI，修改了数据响应式的实现方式等等，好的一点就是它是完全兼容2x的写法，而且在性能和速度上有显著的提升。相关链接vite：https://github.com/vitejs/vitevue-next：https://github.com/vuejs/vue
复制链接

扫一扫