Vue中的响应式引用ref和reactive以及toRefs

BirdMan98

已于 2022-07-26 09:36:08 修改

阅读量322

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-07-26 09:31:59 首次发布

本文链接：https://blog.csdn.net/weixin_41405524/article/details/125988001

版权

Vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

介绍

Vue3响应式引用可以返回响应式数据

效果

在这里插入图片描述

代码

需要用到对象结构

const { name, age } = toRefs(nameObj);

<!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);
      return { name }
    }
  });
  const vm = app.mount('#root');
</script>
</html>

toRef以及context参数

介绍一下toRef和context参数

效果

在这里插入图片描述

代码

context中的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;
      const { attrs, slots, emit } = context;
      function handleClick() { emit('change'); }
      return { handleClick }
    }
  })
  const vm = app.mount('#root');
</script>
</html>