前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >【Vue3 从入门到实战 进阶式掌握完整知识体系】031-Composition API:ref,reactive 响应式引用的用法和原理

【Vue3 从入门到实战 进阶式掌握完整知识体系】031-Composition API:ref,reactive 响应式引用的用法和原理

作者头像
訾博ZiBo
发布2025-01-06 14:18:51
发布2025-01-06 14:18:51
840
举报
文章被收录于专栏:全栈开发工程师

2、ref,reactive 响应式引用的用法和原理

原理:通过 proxy 对数据进行封装,当数据变化时,触发模板等内容的更新; 作用:使非响应式的数据变成响应式;

动态改变setup中定义的属性
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>name: {{name}}</div>
    `,
    setup(props, context){
      // 定义一个变量 name
      let name = "zibo";
      // 2s 后改变其内容
      setTimeout(() => {
        name = "大哥刘备";
      }, 2000);
      return{
        name
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614163205623
image-20210614163205623
使用ref是基本数据类型变成响应式

ref底层得本质还是reactive,系统会根据我们给ref传入得值将它转换成ref(xx)–>reactive({value: xx})

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    // 时间:2021年06月15日 18时18分16秒
    // 理论上讲这里要使用name.value,但 vue 默认帮你做了,直接使用 name 就等于使用了 name.value
    template: `
      <div>name: {{name}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 ref
      const { ref } = Vue;
      // 定义一个变量 name
      // proxy, ref 会将 "zibo" 变成 proxy({value: 'zibo'}) 这样的一个响应式引用
      let name = ref("zibo");
      // 2s 后改变其内容
      setTimeout(() => {
        name.value = "大哥刘备";
      }, 2000);
      return{
        name
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614163910470
image-20210614163910470
实际上ref也能处理非基本类型的数据
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // vue 会自动将 person 替换成 person.value
    // 明白了原理,就不难有一些骚操作,不过既然有了 reactive ,一般还是使用 reactive
    template: `
      <div>name: {{person.name}} age: {{person.age}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 ref
      const { ref } = Vue;
      // 定义一个变量 name
      // proxy, ref 会将 "{name: 'zibo', age: 25}" 变成 proxy({value: {name: 'zibo', age: 25}}) 这样的一个响应式引用
      let person = ref({name: 'zibo', age: 25});
      // 2s 后改变其内容
      setTimeout(() => {
        person.value.name = "大哥刘备";
        person.value.age = 42;
      }, 2000);
      return{
        person
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210616143656895
image-20210616143656895
使用reactive是非基本数据类型变成响应式
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>name: {{nameObj.name}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 reactive
      const { reactive } = Vue;
      // 定义一个变量 nameObj 对象
      let nameObj = reactive({name: 'zibo'});
      // 2s 后改变其内容
      setTimeout(() => {
        nameObj.name = "大哥刘备";
      }, 2000);
      return{
        nameObj
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614164334862
image-20210614164334862
小结

使用 ref 和reactive 取代原来的data;

readonly使定义的属性只读
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>name: {{nameObj.name}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 reactive
      const { reactive, readonly } = Vue;
      // 定义一个变量 nameObj 对象
      let nameObj = reactive({name: 'zibo'});
      let nameObjReadOnly = readonly(nameObj);
      // 2s 后改变其内容
      setTimeout(() => {
        nameObj.name = "大哥刘备";
        nameObjReadOnly.name = "大哥刘备";
      }, 2000);
      return{
        nameObj
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614165200790
image-20210614165200790
解构对象的属性不是响应式的

对象是响应式的,但是从对象中解构的属性不是响应式的

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>name: {{name}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 reactive
      const { reactive } = Vue;
      // 定义一个变量 nameObj 对象
      let nameObj = reactive({name: 'zibo'});
      // 2s 后改变其内容
      setTimeout(() => {
        nameObj.name = "大哥刘备";
      }, 2000);
      const { name } = nameObj;
      return{
        name
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614165557297
image-20210614165557297
toRefs使解构对象的属性也变成响应式的
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 我们想象中 2s 后 这里使用的 name 的值也会变成“大哥刘备”
    template: `
      <div>name: {{name}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 reactive
      const { reactive, toRefs } = Vue;
      // 定义一个变量 nameObj 对象
      let nameObj = reactive({name: 'zibo'});
      // 2s 后改变其内容
      setTimeout(() => {
        nameObj.name = "大哥刘备";
      }, 2000);
      // 单个属性
      // toRefs 使得 proxy({name: 'zibo'}) 变成 proxy(name: proxy({value: 'zibo'}))
      // 多个属性
      // toRefs 使得 proxy({name: 'zibo', age: 25}) 变成 
      // {
      //     proxy(name: proxy({value: 'zibo'})),
      //     proxy(age: proxy({value: 25})),
      // }
      const { name } = toRefs(nameObj);
      return{
        name
      }
    }
  });

  const vm = app.mount('#root');
</script>

</html>
运行结果
image-20210614165849172
image-20210614165849172
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2、ref,reactive 响应式引用的用法和原理
    • 动态改变setup中定义的属性
    • 运行结果
    • 使用ref是基本数据类型变成响应式
    • 运行结果
    • 实际上ref也能处理非基本类型的数据
    • 运行结果
    • 使用reactive是非基本数据类型变成响应式
    • 运行结果
    • 小结
    • readonly使定义的属性只读
    • 运行结果
    • 解构对象的属性不是响应式的
    • 运行结果
    • toRefs使解构对象的属性也变成响应式的
    • 运行结果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档