ref

• ref 处理基础类型的数据
• 原理， 通过proxy 对数据进行封装，当数据变化时，出发模板等内容的更新

const app = Vue.createApp({
    template: `
      <div>{{name}}</div>
    `,
    setup(props,contenxt){
      const {ref} = Vue;
      // proxy , "dell" 变成 proxy({valkue:'dell'})这样的一个响应式引用
      let name = ref('dell');
      setTimeout(()=>{
        name.value = 'lee'
      },5000)
      return{name}
    }
})
const vm = app.mount('#root');
​

ref 获取dom节点

const app = Vue.createApp({
    setup(){
        const {ref , onMounted} = Vue;
        const hello = ref(null);
        onMounted(()=>{
            console.log(hello.value) // 输出页面的元素
        });
        return{ hello }
    },
    template:`
        <div ref="hello">hello world</div>
    
    `
})

---

reactive

• 处理非基础类型的数据

const app = Vue.createApp({
    template:`
      <div>{{nameObj.name}}</div>
    `,
    setup(props,contenxt){
      const {reactive} = Vue;
      // proxy,{name:'dell'}编程proxy({name:'dell'})这样的响应式引用
      const nameObj = reactive({name:"dell"});
      setTimeout(()=>{
        nameObj.name = "hello world"
      },5000)
      return {nameObj}
    }
})
const vm = app.mount('#root');

---

readonly

• 将对象变成只读属性

const app = Vue.crateApp({
    template:`
        <div>{{nameObj.name}}</div>
    `,
    setup(props,contenxt){
        const {readonly} = Vue;
        const nameObj = readonly({name:"dell"})
        setTimeout(()=>{
            nameObj.name = "hello world"
        },5000)
        return {nameObj}
    }
})
const vm = app.mount("#root")

---

toRefs

• 用于对象的析构赋值

const app = Vue.crateApp({
    template:`
        <div>{{name}}</div>
    `,
    setup(props,contenxt){
        const {reactive,toRefs} = Vue;
        const nameObj = reactive({name:"dell"})
        setTimeout(()=>{
            nameObj.name = "hello world"
        },5000)
        // toRefs proxy({name:'dell'}),{name:proxy({values:'dell'})}
        const {name} = toRefs(nameObj)
        return {name}
    }
})
const vm = app.mount("#root")

上面的 toRefs 中如果在 reactive({name:”dell”}) 中添加对象是属性是无法实现双向数据绑定的, 解决 toRef

---

toRef

const app = Vue.createApp({
    template:`
        <div>{{age}}</div>  
    `,
    setup(props,contenxt){
        const {reactive,toRef} = Vue;
        const nameObj = reactive({name:'dell'})
        setTimeout(()=>{
            nameObj.age = "18"
        },5000)
        const age = toRef(nameObj,"age");
        return {age}
    }
})
const vm = app.mount("#root")

上面的 toRef 属性可以在原有对象中增添新的属性,并进行双向数据绑定处理.

---

toRaw

• 将 reactive 的响应式对象转换成一个新的对象（此对象不受响应式控制）

<script>
    import {reactive,toRaw} from "vue"
    export default {
        name:"xxx",
        setup(){
            const textData = ractive({name:"text"})
           const toRawText = toRaw(textData)
            toRawText.name = "xxx"
            console.log(textData.name ==== toRawText.name) // false
        }
    }
</script>