Vue 3.0 有哪些新特性值得我们提前了解

一、迎接 Vue 3.0
1. 简介















​ Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。

    已合并所有计划内的 RFC
    已实现所有被合并的 RFC
    Vue CLI 现在通过 vue-cli-plugin-vue-next 提供了实验性支持

2. 新特性

​ 重点关注:

    更快更省

    Object.defineProperty ——> Proxy

    重构 Virtual DOM

    完全的TypeScript

    团队开发更轻松

    架构更灵活,阅读源码更轻松

    可以独立使用Vue内部模块

    Composition API(组合式API)

    一组低侵入式的、函数式的 API

    更好的逻辑复用与代码组织

    更好的类型推导

3. 参考资源

    https://github.com/vuejs/vue-next
    https://vue-composition-api-rfc.netlify.app/

二、初始化项目

    系统环境

    npm -v
    nrm ls


    安装@vue/cli

    npm install @vue/cli -g


    创建项目

    vue create 项目名


    在项目中安装 vue-next插件,试用Vue3 beta

    vue add vue-next


    项目变化

    import { createApp } from 'vue';
    import App from './App.vue'

    createApp(App).mount('#app')


    启动项目

    npm run serve


​ 补充:

    vue-devtools 暂不支持Vue 3.0
    VSCode中安装Vue 3 Snippets插件

三、setup函数

​ setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
1. 调用时机

​ setup 函数会在 beforeCreate 钩子之前被调用
2. 返回值

​ 如果 setup 返回一个对象,则对象的属性可以在组件模板中被访问
3. 参数

​ 第一个参数为 props,接收当前组件props选项的值,即获取父组件传递过来的参数

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}



​ 第二个参数为context,接收一个上下文对象,该对象中包含了一些在vue 2.x 中需要通过 this 才能访问到属性

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}



​ 注:在 setup() 函数中无法访问 this
四、响应式系统API

​ Vue 3.0提供的一组具有响应式特性的函数式API,都是以函数形式提供的
1. reactive

​ reactive()函数接收一个普通对象,返回该普通对象的响应式代理对象

​ 简单来说,就是用来创建响应式的数据对象,等同于vue 2.x 的 Vue.observable()函数

​ 步骤:

    按需导入 reactive 函数

    import { reactive } from 'vue'


    调用 reactive 函数,创建响应式数据对象

    setup() {
         // 创建响应式数据对象
        const data = reactive({count: 0})

         // 将响应式数据对象暴露出去
        return data;
    }


2. ref

​ ref()函数接收一个参数值,返回一个响应式的数据对象。该对象只包含一个指向内部值的 .value 属性

    基本用法
    在模板中访问时,无需通过.value属性,它会自动展开
    在reactive对象中访问时,无需通过.value属性,它会自动展开

3. computed

​ computed() 函数用来创建计算属性,函数的返回值是一个 ref 的实例

    只读的计算属性
    可读可写的计算属性

4. readonly

​ readonly()函数接收一个对象(普通或响应式),返回一个原始对象的只读代理对象
5. watch

​ watch() 函数用来监视数据的变化,从而触发特定的操作,等同于 vue 2.x中的 this.$watch

    监视单个数据源
    监视多个数据源
    取消监视
    清除无效的异步任务

6. watchEffect

​ watchEffect()函数接收一个函数作为参数,并立即执行该函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。
五、响应式系统工具集
1. isRef

​ 检查一个值是否为一个 ref 对象。
2. isReactive

​ 检查一个对象是否是由 reactive 创建的响应式代理。
3. isReadonly

​ 检查一个对象是否是由 readonly 创建的只读代理。
4. isProxy

​ 检查一个对象是否是由 reactive 还是 readonly 方法创建的代理。
5.unref

​ 如果参数是一个 ref 则返回它的 value,否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖。
6. toRef

​ toRef()函数用来将 reactive 对象的一个属性创建为一个 ref,并且这个 ref 具有响应性,可以被传递。
7. toRefs

​ toRefs()函数用来将 reactive 对象创建为一个普通对象,但该普通对象的每个属性都是一个 ref,并且这个 ref 具有响应性,可以被传递。
六、生命周期钩子函数

​ Vue 3.0 中的生命周期函数和 Vue 2.x 相比做了一些调整和变化,对应关系如下:

    beforeCreate -> 使用 setup()
    created -> 使用 setup()
    beforeMount -> onBeforeMount
    mounted -> onMounted
    beforeUpdate -> onBeforeUpdate
    updated -> onUpdated
    beforeDestroy -> onBeforeUnmount
    destroyed -> onUnmounted
    errorCaptured -> onErrorCaptured

​ 这些生命周期钩子函数只能在 setup() 函数中使用
七、依赖注入

​ 依赖注入就是祖先组件向后代组件传递数据,使用provide() 和 inject() 函数来实现,功能类似 vue 2.x中的 provide/inject

​ 这两个函数只能在 setup() 函数中使用:

    在祖先组件中使用provide()函数向下传递数据
    在后代组件中使用inject()函数获取上层传递过来的数据

八、模板 Refs

​ 通过 ref()函数还可以引用页面上的元素或组件,功能类似于 vue 2.x中的 vm.$refs

​ 步骤:

    在 setup() 中创建一个 ref 对象并返回它
    在页面上为元素添加 ref 属性,并设置属性值与创建的 ref 对象的名称相同
    当页面渲染完成后,可以通过该 ref 对象获取到页面中对应的DOM元素

作者:Vam的金豆之路

主要领域:前端开发

我的微信:maomin9761

微信公众号:前端历劫之路