vue3.0设计目标和语法入门

Posted 2021-04-16 CC前端手记

vue3.0来了，让我们跟上技术的脚步，来看看vue新版本的设计目标和基本语法吧~

设计目标

1. 更小

将大多数全局API和内部帮助程序移动到javascript的module.exports属性上，用ES module imports按需引入。

2. 更快

（1）基于proxy的变动侦测，性能优于getter和setter
vue2采用definePerproty的定义get和set来替换有状态对象的属性，实现响应式更新。近年来主流浏览器增强了对js新特性的支持，比如proxy，允许拦截针对对象属性的操作，用proxy特性可以消除vue现在不能检测新属性添加的限制，提供更好的性能,也代表vue3放弃了兼容ie。
（2）克服虚拟DOM的瓶颈
vue2是将模板编译成渲染函数来返回虚拟DOM树，遍历比较每个节点的每个属性来确定更新哪些部分。vue3修改了vdom的对比算法，进行完整的遍历对比—>只更新vdom绑定了动态数据的部分。
（3）编译器架构重构，更多的编译时优化

3. 加强api设计一致性

4. 加强对TypeScript的支持

没有从Flow type checker中得到很多好处；同时，更多用户使用vue和TS，切换到TypeScript可以自动生成声明文件，减轻维护负担。

5. 提高自身可维护性

解耦内部包：代码采用monorepo结构，框架由内部包组成，每个包都有各自的API、类型定义和测试程序。模块之间的依赖关系更明确，方便开发人员理解和更改。

6. 开发更多底层功能

语法

我们先来学习几个变化比较大的API：

1. reactive API 和 ref API

reactive和ref都可以创建响应式对象，二者的区别在于，reactive创建的是非包装对象，没有包装属性value，类似于在2.0的data中声明变量，与react的useState()很像。ref API创建的是包装式对象，含有value属性，并且可以通过value修改值：

<template> <div id=“app”>欢迎来到vue3.0</div> <div> <h3>{{title.name}}</h3> <div>{{user}}</div> </div></template><script>import { reactive,ref } from ‘vue’export default { name: ‘App’, setUp(){ const title = reactive({ name: ‘hello vue3.0’ }) const user = ref(‘我是user哟~’); user.value = ‘我是修改后的user哟~’ return { title, user } }}</script>

咦？template标签内不再只限制一个根元素了，很开森，有木有？哈哈哈哈……

2. 事件处理

不用methods，事件处理调用什么方法呢？

<button @click=“updateUser”>修改</button>setup(){ const updateUser = ()=>{ user.value=‘我是修改后的user呀….’ } return { updateUser }}

3. onMounted / computed API

生命周期函数和计算函数都定义在setUp()方法内部，如下：

<template> <div>当前count：{{computedCount}}</div> <button @click="increment">修改count</button></template><script> import { ref, onMounted, computed } from 'vue' export default { name: 'App', setUp(){ // 生命周期方法写在这儿 onMounted(()=>{ console.log('init mounted...') }) const count = ref(0); const increment = ()=>{ count.value++ } // 调用计算属性函数Hook const computedCount=computed(()=>count.value*10) return { count, increment, computedCount } } }</script>

5、生命周期钩子变化
6、TS和JSX支持