关于vue.js:vue3-的两种变量refreactive

50次阅读

共计 722 个字符,预计需要花费 2 分钟才能阅读完成。

  1. 应用 ref 定义根本数据类型的响应式变量,应用 reactive 定义数组或对象类型的响应式变量,都是响应的
 const count = ref(0)
const obj = reactive({count: 0})
  1. vue3 应用 reactive 包裹数组和对象不能间接赋值,否则会失去响应性。
    要用「响应式值援用」, 不必一般的根本类型值与对象,否则容易失去响应性
 如 const arry1 = reactive([1])
      在 js 中间接赋值,将失去响应性:arry1 = [1,2,3]  //arry1=[1]
    能够这么定义 const data = reactive({arry1:[1]})
    在 js 中应用 data.arry1 = [1,2,3] // arry1=[1,2,3]

2. 创立的响应式变量,不能进行解构或开展,否则变量将失去响应成果,能够应用 toRefs API

 如
      const book = reactive({
      author: 'Vue Team',
      year: '2020',
      title: 'Vue 3 Guide'
    })

    let {author, title} = toRefs(book)

    title.value = 'Vue 3 Detailed Guide' // 咱们须要应用 .value 作为题目,当初是 ref
    console.log(book.title) // 'Vue 3 Detailed Guide'
  而不能这么解构 let {author, title} = book
  也不能应用开展:...book

总结一下,一共有两种变量格调:

 就像你在一般 JavaScript 中区别申明根底类型变量与对象变量时一样区别应用 ref 和 reactive。所有的中央都用 reactive,而后记得在组合函数返回响应式对象时应用 toRefs。这升高了一些对于 ref 的心智累赘 

正文完
 0