Vue3之Composition API的ref，reactive，toRefs，readonly，toRef，context(attrs, slots, emit) 响应式引用的用法和原理

柔情只为你懂 2022-10-20 13:48 84阅读 0赞

# ref, reactive 响应式的引用 #

# 原理，通过 proxy 对数据进行封装，当数据变化时，触发模版等内容的更新 #

# ref 处理基础类型的数据 #

# reactive 处理非基础类型的数据 #

# toRefs作用：reactive处理的对象是响应式的，但是里面具体的值不是响应式的，所以把这个值导出去，把这个值改了的时候它不会改变，出来这个问题所以用到toRefs,下面是用toRefs对nameObj做个包装，然后在解构导出去，这时候值变化它也会跟着变化 #

toRefs 可将 proxy(\{name: 'dell'\})转为\{ name: proxy(\{value: 'dell'\}) \}

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>lesson 35</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // ref, reactive 响应式的引用
      // 原理，通过 proxy 对数据进行封装，当数据变化时，触发模版等内容的更新
      // ref 处理基础类型的数据
      // reactive 处理非基础类型的数据
      const app = Vue.createApp({
        template: `
          <div>{
       {name}}</div>
        `,
        setup(props, context) {
          // const { ref } = Vue;
          // proxy , 'dell' 变成 proxy({value: 'dell'}) 这样的一个响应式引用
          // let name = ref('dell');
          // setTimeout(() => {
          //   name.value = 'lee'
          // }, 2000)
          // return { name }
    
          const { reactive, readonly, toRefs } = Vue;
           // proxy , { name: 'dell'} 变成 proxy({ name: 'dell'}) 这样的一个响应式引用
          const nameObj = reactive({name: 'dell', age: 28});
          setTimeout(() => {
            nameObj.name = 'lee'
          }, 2000)
          // toRefs proxy({ name: 'dell', age: 28}), { 
          //  name: proxy({ value: 'dell'}),
          //  age: proxy({value: 28})
          // }
          const { name, age } = toRefs(nameObj); // reactive处理的对象是响应式的，但是里面具体的值不是响应式的，所以把这个值导出去，把这个值改了的时候它不会改变，
    // 出来这个问题所以用到toRefs,下面是用toRefs对nameObj做个包装，然后在解构导出去，这时候值变化它也会跟着变化
          return { name }
        }
      });
      const vm = app.mount('#root');
    </script>
    </html>

# readonly表示响应式对象不可修改 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

# toRef的作用是从data里面取数据，能取到就取，取不到就默认给个空值 #

# 在Composition API里面，我们可以使用context获取到attrs, slots, emit #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>lesson 36</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      // toRef, context
      const app = Vue.createApp({
        methods: {
          handleChange() {
            alert('change');
          }
        },
        template: `<child @change="handleChange">parent</child>`,
      });
      
      app.component('child', {
        template: '<div @click="handleClick">123123</div>',
        setup(props, context) {
          const { h } = Vue;
          // context有三个值分别是attrs, slots, emit
          const { attrs, slots, emit } = context;
          // console.log(attrs.app); // None-Props属性
          // slots 插槽
          // 在Composition API里面，我们直接使用context下的emit方法向外触发事件就可以了
          function handleClick() { emit('change'); }
          return { handleClick }
        }
      })
      const vm = app.mount('#root');
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20221020/05e03af160de4ad089e83a8e7b9fab3e.png