设为首页 加入收藏

TOP

尝鲜 vue3.x 新特性 - CompositionAPI(一)
2019-10-10 18:15:00 】 浏览:471
Tags:尝鲜 vue3.x 特性 CompositionAPI

原文地址 http://www.liulongbin.top:8085

0. 基础要求

  1. 了解常见的 ES6 新特性
    • ES6 的导入导出语法
    • 解构赋值
    • 箭头函数
    • etc...
  2. 了解 vue 2.x 的基本使用
    • 组件
    • 常用的指令
    • 生命周期函数
    • computed、watch、ref 等

1. 相关资源

  • 【知乎 - Vue Function-based API RFC】https://zhuanlan.zhihu.com/p/68477600
  • 【github - vuejs/composition-api】https://github.com/vuejs/composition-api
  • 【github - composition-api/CHANGELOG.md】https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md
  • 【开源中国 - 尤雨溪公布 Vue 3.0 开发路线:将从头开始重写 3.0】https://www.oschina.net/news/100515/plans-for-the-next-iteration-of-vue-js

2. 初始化项目

  1. 安装 vue-cli3

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
  2. 创建项目

    vue create my-project
    # OR
    vue ui
  3. 在项目中安装 composition-api 体验 vue3 新特性

    npm install @vue/composition-api --save
    # OR
    yarn add @vue/composition-api
  4. 在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装

    import Vue from 'vue'
    import VueCompositionApi from '@vue/composition-api'
    
    Vue.use(VueCompositionApi)

    安装插件后,您就可以使用新的 Composition API 来开发组件了。

3. setup

setup() 函数是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

3.1 执行时机

setup 函数会在 beforeCreate 之后、created 之前执行

3.2 接收 props 数据

  1. props 中定义当前组件允许外界传递过来的参数名称:

    props: {
        p1: String
    }
  2. 通过 setup 函数的第一个形参,接收 props 数据:

    setup(props) {
        console.log(props.p1)
    }

3.3 context

setup 函数的第二个形参是一个上下文对象,这个上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到,在 vue 3.x 中,它们的访问方式如下:

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

注意:在 setup() 函数中无法访问到 this

4. reactive

reactive() 函数接收一个普通对象,返回一个响应式的数据对象。

4.1 基本语法

等价于 vue 2.x 中的 Vue.observable() 函数,vue 3.x 中提供了 reactive() 函数,用来创建响应式的数据对象,基本代码示例如下:

import { reactive } from '@vue/composition-api'

// 创建响应式数据对象,得到的 state 类似于 vue 2.x 中 data() 返回的响应式对象
const state = reactive({ count: 0 })

4.2 定义响应式数据供 template 使用

  1. 按需导入 reactive 函数:

    import { reactive } from '@vue/composition-api'
  2. setup() 函数中调用 reactive() 函数,创建响应式数据对象:

    setup() {
         // 创建响应式数据对象
     const state = reactive({count: 0})
    
         // setup 函数中将响应式数据对象 return 出去,供 template 使用
     return state
    }
  3. template 中访问响应式数据:

    <p>当前的 count 值为:{{count}}</p>

5. ref

5.1 基本语法

ref() 函数用来根据给定的值创建一个响应式数据对象ref() 函数调用的返回值是一个对象,这个对象上只包含一个 .value 属性:

import { ref } from '@vue/composition-api'

// 创建响应式数据对象 count,初始值为 0
const count = ref(0)

// 如果要访问 ref() 创建出来的响应式数据对象的值,必须通过 .value 属性才可以
console.log(count.value) // 输出 0
// 让 count 的值 +1
count.value++
// 再次打印 count 的值
console.log(count.value) // 输出 1

5.2 在 template 中访问 ref 创建的响应式数据

  1. setup() 中创建响应式数据:

    import { ref } from '@vue/composition-api'
    
    setup() {
     const count = ref(0)
    
         return {
             count,
             name: ref('zs')
         }
    }
  2. template 中访问响应式数据:

    <template>
     <p>{{count}} --- {{name}}</p>
    </template>

5.3 在 reactive 对象中访问 ref 创建的响应式数据

当把 ref() 创建出来的响应式数据对象,挂载到 reactive() 上时,会自动把响应式数据对象展开为原始的值,不需通过 .value 就可以直接被访问,例如:

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 输出 0
state.count++            // 此处不需要通过 .value 就能直接访问原始值
console.log(count)       // 输出 1

注意:新的 ref 会覆盖旧的 ref,示例代码如下:

// 创建 ref 并挂载到 reactive 中
const c1 = ref(0)
const state = reactive({
  c1
})

// 再次创建 ref,命名为 c2
const c2 = ref(9)
// 将 旧 ref c1 替换为 新 ref c2
state.c1 = c2
state.c1++

console.log(state.c1) // 输出 10
console.log(c2.value) // 输出 10
console.log(c1.value) // 输出 0

6. isRef

isRef() 用来判断某个值是否为 ref() 创建出来的对象;应用场景:当需要展开某个可

首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Extjs 兼容IE8常见问题及解决方法 下一篇HTML(上)

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目