【Vue 从入门到实战进阶式掌握完整知识体系】01

2025-07-24 06:33:32

【Vue 从入门到实战进阶式掌握完整知识体系】01 2、ref，reactive 响应式引用的用法和原理原理：通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新；作用：使非响应式的数据变成响应式；动态改变setup中定义的属性代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="e

【Vue 从入门到实战进阶式掌握完整知识体系】01

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

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

动态改变setup中定义的属性

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106141620562

使用ref是基本数据类型变成响应式

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061416910470

实际上ref也能处理非基本类型的数据

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

  ct app = ({
    // vue 会自动将 person 替换成 person.value
    // 明白了原理，就不难有一些操作，不过既然有了 reactive ，一般还是使用 reactive
    template: `
      <div>name: {{}} age: {{person.age}}</div>
    `,
    setup(props, context){
      // 从 vue 引入 ref
      ct { 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. = "大哥刘备";
        person.value.age = 42;
      }, 2000);
      return{
        person
      }
    }
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061614656895

使用reactive是非基本数据类型变成响应式

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106141644862

小结

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

readonly使定义的属性只读

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210614165200790

解构对象的属性不是响应式的

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

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210614165557297

toRefs使解构对象的属性也变成响应式的

代码语言：javascript代码运行次数：0运行复制

<!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="@next"></script>
</head>

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

<script>

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

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210614165849172本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除响应式原理apivue入门

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200009.html

本站网友信息网络安全	29分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ // 我们想象中 2s 后这里使用的 name 的值也会变成“大哥刘备” template
本站网友 vip源码	15分钟前发表
'zibo'}) 变成 proxy(name
本站网友怎么走路	3分钟前发表
'zibo'}); // 2s 后改变其内容 setTimeout(() => { = "大哥刘备"; }
本站网友二手婴儿床	1分钟前发表
context){ // 从 vue 引入 reactive ct { reactive } = Vue; // 定义一个变量 nameObj 对象 let nameObj = reactive({name
本站网友中国品牌服装网	19分钟前发表
一般还是使用 reactive template
本站网友生死停留豆瓣	18分钟前发表
toRefs } = Vue; // 定义一个变量 nameObj 对象 let nameObj = reactive({name
本站网友邮政平邮查询单号查询	19分钟前发表
context){ // 定义一个变量 name let name = "zibo"; // 2s 后改变其内容 setTimeout(() => { name = "大哥刘备"; }
本站网友深圳平安保险	15分钟前发表
proxy({value
本站网友维瓦尔第四季	1分钟前发表
25}))
本站网友北京欧美同学咨询中心	5分钟前发表
age
本站网友丙型肝炎防治指南	15分钟前发表
{name
本站网友北京高新技术企业	4分钟前发表
就不难有一些操作
本站网友装修经验	14分钟前发表
context){ // 从 vue 引入 reactive ct { reactive } = Vue; // 定义一个变量 nameObj 对象 let nameObj = reactive({name
本站网友济南奥体	7分钟前发表
proxy({value
本站网友治疗痛经	30分钟前发表
setup(props
本站网友空间租赁	8分钟前发表
直接使用 name 就等于使用了 name.value template

【Vue 从入门到实战进阶式掌握完整知识体系】01