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

最新推荐文章于 2024-06-18 23:53:50 发布

xyphf_和派孔明

最新推荐文章于 2024-06-18 23:53:50 发布

阅读量1.2k

点赞数 1

分类专栏： vue.js入门

本文链接：https://blog.csdn.net/xyphf/article/details/116978665

版权

vue.js入门专栏收录该内容

93 篇文章 6 订阅

订阅专栏

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表示响应式对象不可修改

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

<script>
  // toRef, context
  const app = Vue.createApp({
    template: `<div>{{ age }}</div>`,
    setup(props, context) {
      const { reactive, toRef } = Vue;
      const data = reactive({name: 'dell'});
      // toRefs 它去解构data的时候，如何data里面没有的值,它不会给它一个默认的值, 而是报错
      // toRef 的作用是解决data里面没有的数据
      const age = toRef(data, 'age'); // 表示从data里面取一个age的数据，能取到就取，如果取不到就默认为空的响应式数据
      setTimeout(() => {
        age.value = 'lee'
      },2000)
      return { age }
    }
  });
  const vm = app.mount('#root');
</script>

在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>