初探Vue3.x的Composition API新开发模式

点击阅读原文

概述

vue2和vue3两个版本的响应式原理以及开发模式和写法都有很大的改变，这里仅示例组件的新开发模式

vue2

vue2的开发模式是选项型（Options API）
会发现Options API 约束了各个模块的代码，可以很直观的看到在相应的位置做了什么事情

vue3

vue3的开发模式是组合型（Composition API）
现在换成Composition API后，不再有模块的分离，所有的API都写在setup里，这可以让代码可以灵活的使用

一、Setup

1、Setup是Composition API的入口
2、this在setup中不可用
3、所有的Composition API使用前都必须先载入import {} form "vue"
4、所有的数据需要渲染到视图的都要return出去

何时调用

创建组件实例，初始化props后，就可以调用Setuop函数
从声明周期的视角来看，它是在beforeCreate前调用

 

参数

1、props

获取props对象，不允许结构，否则响应式失效

2、context

此对象包含attrsslotsemit三个属性，可以进行结构

export default {
  props: {
    name: String
  },
  setup(props,context) {
    console.log(props.name);
    // Attribute (非响应式对象)
    console.log(context.attrs)
    // 插槽 (非响应式对象)
    console.log(context.slots)
    // 触发事件 (方法)
    console.log(context.emit)
  }
}

 

二、响应式对象

ref

接收一个参数，返回一个响应式的对象
在非视图层获取值需要通过obj.value得到

<template>
  <div>
      {{count.value}}
  </div>
</template>

 

import {ref} from 'vue' //载入ref
export default {
  setup() {
    const count=ref(0)
  }
  return {
    //需要渲染到视图的数据都必须return出去
    count 
  }
}

 

模板ref

当使用组合型API时，有时候需要获取模板内元素(Dom)或组件实例的引用，可以声明一个ref并返回它

<template>
  <div>
    <p ref="url">www.lxtian.com</p> <!--绑定ref-->
    <button @click="btn">click</button>
  </div>
</template>

 

import {ref} from 'vue' //载入ref
export default {
  setup() {
    const url = ref(null);//
    const btn=()=>{
      console.log(url.value.innerText) //输出 www.lxtian.com
    }
    return {
      url,
      btn
    }
  }
}

 

reactive

接收一个参数（普通对象），返回该对象的响应式代理

<template>
  <div>
      {{state.count}}
  </div>
</template>

 

import {reactive} from 'vue' //载入reactive
export default {
  setup() {
    const state = reactive({
      count:0 
    })
    return {
      //需要渲染到视图的数据都必须return出去
      state 
    }
  }
}

 

toRefs

toRefs()可以将reactive声明的响应式对象，转为普通的对象

<template>
  <div>
      <h2>{{name}}</h2>
  </div>
</template>

 

mport { reactive, toRefs } from 'vue'
export default {
  setup(){
    const state = reactive({
      name:'小明'
    })
    return {
      ...toRefs(state)
    }
  }
}

 

ref和reactive区别

ref：传入的是普通值，一般用于定义基本类型的数据
reactive：传入的是普通对象，一般用于定义复杂类型的数据

三、计算属性Computed

接收一个函数时：值为只读，无法修改或赋值
接收一个对象：getset属性，可以灵活操作获取时和修改时的状态

<template>
  <div>
    小明今年已经<input type="text" v-model="xm.age">岁啦！<br>
    出生年份是：<input type="text" v-model="year">
  </div>
</template>

 

import { reactive,computed } from 'vue';//引入reactive和computed
export default {
  setup(){
    const xm=reactive({
      age:20
    })
    const year=computed({
      //获取时触发
      get(){
        return 2021-xm.age
      },
      //赋值或修改时触发
      set(val){
        xm.age=2021-val
      }
    })
    return {
      //需要渲染到视图的数据都必须return出去
      xm,
      year
    }
  }
}

 

四、监听器watch

监听单个数据

// 监听reactive对象
const state = reactive({ count: 0 })
watch(() => state.count, (newVal, oldVal) => {
    console.log("新值："+newVal)
    console.log("旧值："+oldVal)
  }
)

// 监听ref对象
const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log("新值："+newVal)
  console.log("旧值："+oldVal)
})

 

监听多个数据

const xm=reactive({
  name:"小明",
  age:20
})

watch([()=>xm.age,()=>xm.name],
([newAge,newName],[oldAge,oldName])=>{
  console.log(newAge,newName);
  console.log(oldAge,oldName);
})

 

五、生命周期

vue2与vue3生命周期相对应的组合式API

beforeCreate => 弃用
created => 弃用
beforeMount => onBeforeMount ---- 挂载前
Mounted => onMounted ---- 挂载后
beforeUpdate => onBeforeUpdate ---- 更新前
updated => onUpdated ---- 更新后
beforeDestroy => onBeforeUnmount ----销毁前
destroyed => onUnmounted ---- 销毁后

测试过发现vue2的生命周期还是可以在vue3版本中使用的，但是要写在setup之外

结束

感谢阅读，知识尚浅，如有错误欢迎指出！
以上仅示例一些常用的模块，深入了解原理请移步Vue3文档：https://v3.cn.vuejs.org/guide/reactivity-fundamentals.html