Vue3——初探

1、非工程化的方式的区别：

• vue3不再使用new Vue的方式，导包后直接返会Vue的大对象，通过解构方式获取Vue的各种函数与功能
• 通过createApp函数来初始化Vue，作为入口函数
• 不再使用el选项或$mount挂载到根节点上，而是直接使用mount

2、setup函数

Vue3.x的一大新特性就是引入了setup函数，除了默认延续了Vue2.x的已有开发方式以外，Vue3.x可以在createApp时传入一个setup函数，该函数会在组件创建前并且props属性绑定完成时执行，（所以setup中的this是没有的，因为其内部的this还没有指向Vue实例对象,因为setup执行时候vue还没创建完毕）。setup中存在两个参数props和content，可以在props中获取组件外传入的参数，可以在content中使用vue提供的API。

2.1、组合式API

在组合式API编程方式中，开发者可以采用纯函数的形式编写代码，这样可以深度支持JavaScript的模块化开发似的相同的框架在不同开发者的手里实现不同的质量和效果。在其中配合响应式API让setup编程方式如同React的函数式编程体系一样变得自由而灵活，这也使得Vue3.x可以优质的胜任几乎全部的前端开发场景。

let  { createApp } = Vue
    let app = createApp({
        setup(){
            // console.log(this)  // this指向window 而不是指向vue实例 因为还没有创建完毕

            let title =  "你好，vue3";
            // setup函数内部return回去的对象中的属性会自动的挂载到Vue的实例对象上
            // 所以这个title可以直接在视图中获得到

            return { title }
        }
    })

    // 将#app挂载到Vue上
    let vm = app.mount("#app")

2.2 函数式开发介绍

• reactive
• ref
• watch
• computed

2.2.1 reactive