vue3 小知识点

Vue3.0 小知识点

响应式数据的声明

1.reactive

reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。

• 获取数据值的时候直接获取，不需要加.value

• 参数只能传入对象类型

import { reactive } from 'vue'
// 响应式状态
const state = reactive({
  count: 0
})
// 打印count的值
console.log(state.count)

// 页面显示
<div>{{state.count}}</div>
​
//直接导出state
return {
    state
}

2.ref

ref 用于为数据添加响应式状态。由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了，同样返回一个具有响应式状态的副本。

• 获取数据值的时候需要加.value。可以理解为ref是通过reactive包装了一层具有value属性的对象实现的

  const count = ref(0) 
  //等价于
  const count = reactive({
      value: 0
  })
  // 打印count的值
  console.log(count.value)

• 在模板中不需要加.value, 因为会自动添加.value

  <div>{{count}}</div>

• 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。

• vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。

3.toRefs

toRefs()函数可以将reactive()创建出来的响应式对象，转换为普通对象，只不过这个对象上的每个属性节点，都是ref()类型的响应式数据

// 响应式状态
const state = reactive({
  count: 0,
    num: 2
})
const msg =  reactive({
  title: '测试',
})

// 返回值
return toRefs(state) 
// 基本约等于
return {
    count: {
        value: 0
    },
    num: {
        value: 0
    }
}
// 模板内显示count,自动添加.value
<div>{{count}}</div>

return {
    msg,
    ...toRefs(state) 
}
// 基本约等于
return {
    msg,
    count: {
        value: 0
    },
    num: {
        value: 0
    }
}
// 模板内显示count ,自动添加.value
<div>{{count}}</div>
// 模板内显示msg的title
<div>{{msg.title}}</div>

4.es6之扩展运算符 三个点（...）

对象中的扩展运算符(...) 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
// 等价于
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。