• VUE语法-ref和reactive响应式数据引用

    1、响应式概述

    在vue中定义一个参数，当这个参数在使用中发生了变化，在页面中对这个数据应用的地方都会同步的发生变化，这个就是数据响应式。

    2、创建一个非响应式的参数

    该程序中采用的是VUE3的用法：

    1、在程序中定义了一个局部变量let name=”晓春”;并在id=”app”的div中通过{{name}}的方式应用。

    通过setTime定义了一个定时器，2s之后将将name的值修改为”大春”

    2、这种情况下name的值在页面中是不会自动刷新的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://unpkg.com/vue@3">script>
    9. head>
    10. <body>
    11.     <div id="app">{{name}}div>
    12.   <script type="module">
    13.     //实例化vue实例
    14.     const { createApp } = Vue
    15.     const app=createApp({
    16.        //created 实例被完全初始化之前,无法使用this关键词
    17.        setup(props,context){
    18.         let name=ref('晓春'+new Date());
    19.         setTimeout(() =>{
    20.           name="大春";
    21.         },2000)
    22.          return {name}
    23.        }
    24.     });
    25.     //vue实例只作用于app这个DOM节点中
    26.     app.mount('#app');//viewModel是组件帮助我们完成的
    27.   script>
    28. body>
    29. html>

    结果展示

    2s后，数据并没有发生变化

    b81db1f2f8ea47b4b3ea1048080fb15e.png

    3、通过ref创建一个响应式参数

    1、当数据变化的时候，id为app的div中调用的name参数会自动的变化

    2、ref只能定义简单的数据类型实现响应式。

    3、使用了ref之后，取name值的时候需要通过name.value，而不能直接取。

    4、注意Vue的大小写

    5、页面中如果想获取自定义的响应式参数、函数等一定要将写在return中返回。

    3.1、通过ref创建响应式参数

    1、const {ref} =Vue;：从Vue中引出ref响应式函数

    2、2s后，name在页面显示的值自动的刷新了。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://unpkg.com/vue@3">script>
    9. head>
    10. <body>
    11.     <div id="app">{{name}}div>
    12.   <script type="module">
    13.     //实例化vue实例
    14.     const { createApp } = Vue
    15.     const app=createApp({
    16.        //created 实例被完全初始化之前,无法使用this关键词
    17.        setup(props,context){
    18.         // 从vue中引入ref
    19.         const {ref} =Vue;
    20.         let name=ref('晓春===>'+new Date());
    21.         setTimeout(() =>{
    22.           name.value="大春"+new Date();
    23.         },2000)
    24.          return {name}
    25.        }
    26.     });
    27.     //vue实例只作用于app这个DOM节点中
    28.     app.mount('#app');//viewModel是组件帮助我们完成的
    29.   script>
    30.  
    31.     
    32. body>
    33. html>

    结果展示：从图中我们发现值发生了变化

    05d9844cf52e4021a335e4e1909e449d.png

    4、通过reactive创建响应式参数

    1、非基础类型的数据响应，我们选择使用reactive,如数组类型，json类型等。

    2、const {ref,reactive} =Vue;从Vue中引出ref和reactive

    4.1、通过reactive实现响应式参数

    1、json的值通过{{stu_info.stu_name}}获取

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script src="https://unpkg.com/vue@3">script>
    9. head>
    10. <body>
    11.     <div id="app">
    12.       {{name}}<br>
    13.       {{stu_info.stu_name}}
    14.     div>
    15.   <script type="module">
    16.     //实例化vue实例
    17.     const { createApp } = Vue
    18.     const app=createApp({
    19.        //created 实例被完全初始化之前,无法使用this关键词
    20.        setup(props,context){
    21.         // 从vue中引入ref
    22.         const {ref,reactive} =Vue;
    23.         let name=ref('晓春===>'+new Date());
    24.         //定义局部变量，设置一个json类型的字符串。
    25.         let stu_info = reactive({"stu_id":"1001","stu_name":"汤十一郎"});
    26.         setTimeout(() =>{
    27.           name.value="大春"+new Date();
    28.           stu_info.stu_name="汤十二郎";
    29.         },2000)
    30.          return {name,stu_info}
    31.        }
    32.     });
    33.     //vue实例只作用于app这个DOM节点中
    34.     app.mount('#app');//viewModel是组件帮助我们完成的
    35.   script>

    结果展示：ref和reactive修饰的数据都发生了变化

    31f08f3f9b134524b030d7a55ae9ecaa.png

  • 相关阅读:
    MySQL主从复制详解
    mybatis基本构成&mybatis与hibernate的区别&添加mybatis支持
    internship：项目代码所涉及陌生注解及其作用
    协程（二）——kotlin中协程启动的条件
    html表格标签
    本地浏览器打开远程服务器上的Jupyter Notebook
    记一次磁盘挂载导致mysql服务启动失败的问题
    数据资产如何入表？有哪些步骤
    全面理解元宇宙-Web3.0具象表现形式
    【JavaSE】String类的重点语法知识汇总
  • 原文地址：https://blog.csdn.net/tangshiyilang/article/details/134701103