vue3中如何定义响应式变量

Posted 2023-03-05 泠泠在路上

vue2中定义方式：

熟悉vue2的前端开发小伙伴，都知道定义变量的方式是属于 选项式写法，所有的变量名全都定义在 data()return title:‘hello world’,里，如下图所示：

<template>
     <div>
          <h1>title</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>

<script>
export default 
    //这种是option api(选项api)
     data()
          return 
              title:'hello world'
          
     ,
     methods:
         sayHi()
         this.title = "hello vue";
         
     

</script>

那么，在vue3中定义变量的方式是组合式写法，在setup函数里，提供了ref和reactive，

<template>
     <div>
          <h1>title</h1>
          <h1>person</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>

<script>
//引入vue中的一个方法
import ref,reactive from 'vue';  //ref可以把字符串变成响应式变量 ，reactive可以把对象变成响应式对象
export default 
    //composition api(组合api)
    setup()
        let title = ref("hello world");
        const person = reactive("name":"小明",age:2);
        function sayHi()
            title.value = "hello Vue"
            person.name ="小张"
        
        return
            title,
            sayHi,
            person
        
    

</script>

reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型，ref也可以定义数组和对象，但ref操作数据需要.value，注意在template模板中不需要。reactive一直都不需要.value，但是用reactive() 创建的响应式对象，整个对象是响应式的但对象里的每一项都是普通的值，当你把它用展开运算符展开后 整个对象的普通值都不是响应式的，所以需要展开 reactive() 创建的响应式对象 又不想让他们失去响应式特点的时候 就需要用 toRefs() 将它进行转换