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

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支持