Vue3中 reactive 和 ref 和 toRefs

   
// reactive 是vue3的一个组合api vue3中新增的最核心的功能就是组合api
// reactive vue3建议只用来声明对象 他声明的对象中的每一个属性都是响应式的
// 他是结合es6的proxy 结合递归给每一个reactive声明的对象数据添加上 setter/getter方法 从而实现数据的响应式
// ref是用reactive封装成的一个方法 这个方法我们通常用来声明基本数据类型和数组数据
// ref声明的数据是一个对象 值是value ref在使用的时候不需要写value 但是赋值的时候必须写value
// toRefs可以解构reactive对象的属性 将属性取出 转换成一个ref对象,假如你要reactive里面的obj.name,在return{}用了 ...toRefs(xxx)就可以直接使用name
  

html  
  <button @click="changeName">修改用户名</button>

Js
import { reactive } from 'vue'
let obj = reactive({
        name: "zhangsan",
        age: 18,
        isSex: { sex: '女' },
     //可以直接在里面写方法
        changeName() {
            // console.log(this)
            this.name = '李四'
        }
    })

​

ref

html
    <button @click="add">add</button>

Js
 let number = ref(123)
//可以在css中使用ref定义的相应数据
 const color = ref('red')
    function add() {
      number.value++
    }

    return {
      ...toRefs(obj), // toRefs可以解构reactive对象的属性 将属性取出 转换成一个ref对象,假如你要reactive里面的obj.name,在return{}用了 ...toRefs(xxx)就可以直接使用name
      number,
      add,
      color
    }

可以在css中使用ref定义的相应数据

html    
<h3 @click="color = 'blue'">这是我要改变颜色的元素</h3>

css
<style scoped lang="scss">
  h3 {
    color: v-bind(color);
  }
</style>