vue3 学习

• vue3 中不再使用this。
• vue3 将data、computed、ref、method、生命周期组在一起形成了composition API vue3 composition API 理解：juejin.cn/post/689054…

setUp()

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口.

ref

• 把数据变成响应式，会返回一个具有响应的副本。
• 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。

• vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。
• 使用refName.value来进行赋值与取值

import { ref } from 'vue'

// 为基本数据类型添加响应式状态
const name = ref('Neo')

// 为复杂数据类型添加响应式状态
const state = ref({
  count: 0
})

// 打印name的值
console.log(name.value)
// 打印count的值
console.log(state.value.count)

reactive

用法和ref的用法类型，也是将数据变成响应式数据，当数据发生变化时UI也会跟着变化，不同的是ref用于基本数据类型，reactvie用于复杂数据类型。

const state = reactive({
    loading: false,
    error: false,
    data: initData,
  });

toRef

toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据。

例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

• 获取数据值的时候需要加.value
• toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据

import { defineComponent, toRef } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 创建变量myTitle
    const myTitle = toRef(props, 'title')

    console.log(myTitle.value)
  }
})

toRefs

toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。

• 常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。

• 获取数据值的时候需要加.value
• toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据

import { defineComponent, toRefs } from 'vue'

export default defineComponent({
  props: [title],
  
  setup (props) {
    // 使用了解构赋值语法创建了变量myTitle
    const { myTitle } = toRefs(props)

    console.log(myTitle.value)
  }
})