当前位置: 首页 > news >正文

房地产楼盘微信网站建设营销方案招聘类网站怎么做

房地产楼盘微信网站建设营销方案,招聘类网站怎么做,wordpress 增加背景,WordPress文章归档错误一、情景说明 在Vue2中,我们已经知道数据的响应式,是什么含义 就是,在data块中,定义的变量,在页面中引用后 任何地方修改了该变量,页面中引用的变量会立即显示最新数值。 这块,我们学习了 插值…

一、情景说明

Vue2中,我们已经知道数据的响应式,是什么含义
就是,在data块中,定义的变量,在页面中引用后
任何地方修改了该变量,页面中引用的变量会立即显示最新数值。

这块,我们学习了
插值语法:{{}}
单向绑定指令:v-bind
双向绑定指令:v-model

那么,在Vue3中,没有了data块,如何实现数据的响应式了?

二、响应式数据

Person.vue组件

<template><div class="person"><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2><h2>地址:{{address}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts" setup name="Person">// 数据,原来是写在data中的,此时的name、age、tel都不是响应式的数据let name = '张三'let age = 18let tel = '13888888888'let address = '北京昌平区宏福苑·宏福科技园'// 方法function changeName() {name = 'zhang-san' //注意:这样修改name,页面是没有变化的console.log(name) //name确实改了,但name不是响应式的}function changeAge() {age += 1 //注意:这样修改age,页面是没有变化的console.log(age) //age确实改了,但age不是响应式的}function showTel() {alert(tel)}
</script>

1、ref实现基本类型的数据响应式

针对上面的组件,我们想要实现name、age两个变量的数据响应式效果。
script引用函数:

import {ref} from 'vue'

创建变量:

  let name = ref('张三')let age = ref(18)

读取变量:

        <h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2>

修改变量:
JS中操作ref创建的变量时候需要.value

  // 方法function changeName() {name.value = 'zhang-san'}function changeAge() {age.value += 1 }

2、ref实现对象类型的数据响应式

底层是reactive实现的功能
script引用函数:

import {ref} from 'vue'

创建变量:

  let car = ref({brand:'奔驰',price:100})let games = ref([{id:'aysdytfsatr01',name:'王者荣耀'},{id:'aysdytfsatr02',name:'原神'},{id:'aysdytfsatr03',name:'三国志'}])

读取变量:

 <h2>汽车信息:一辆{{car.brand}}车,价值{{car.price}}万</h2><li v-for="g in games" :key="g.id">{{g.name}}</li>

修改变量:
JS中操作ref创建的变量时候需要.value

  function changePrice(){car.value.price += 10console.log(car.value.price)}function changeFirstGame(){games.value[0].name = '流星蝴蝶剑'}

3、reactive实现对象类型的数据响应式

script引用函数:

import {reactive} from 'vue'

创建变量:
创建了3个响应式对象数据

  // 数据// 单个对象数据let car = reactive({brand:'奔驰',price:100})// 数组型对象let games = reactive([{id:'aysdytfsatr01',name:'王者荣耀'},{id:'aysdytfsatr02',name:'原神'},{id:'aysdytfsatr03',name:'三国志'}])// 多层次对象let obj = reactive({a:{b:{c:666}}})

读取变量:

 <h2>汽车信息:一辆{{car.brand}}车,价值{{car.price}}万</h2><li v-for="g in games" :key="g.id">{{g.name}}</li><h2>测试:{{obj.a.b.c}}</h2>

修改变量:

    // 方法function changePrice(){car.price += 10console.log(car.price)}function changeFirstGame(){games[0].name = '流星蝴蝶剑'}function changeObj(){obj.a.b.c = 999}

4、注意事项

reactive创建的对象变量,被重新分配一个新对象时,会失去响应式效果
ref创建的对象类型变量,不存在这个问题。
问题重现:
reactive定义一个对象类型的变量

    let car = reactive({brand:'奔驰',price:100})

需求:
给car重新赋值一个对象
无效写法:

car = {brand:'奥拓',price:1}
car = reactive({brand:'奥拓',price:1})

有效写法:

Object.assign(car,{brand:'奥拓',price:1})

三、对比

  • 宏观角度看:
  1. ref用来定义:基本类型数据对象类型数据

  2. reactive用来定义且只能定义:对象类型数据

  • 区别:
  1. ref创建的变量必须使用.value(可以使用volar插件自动添加.value)。
  2. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。
  • 使用原则:
  1. 若需要一个基本类型的响应式数据,必须使用ref
  2. 若需要一个响应式对象,层级不深,refreactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive
http://www.dtcms.com/a/427458.html

相关文章:

  • 互联网视频云平台EasyDSS无人机技术在烟火巡检场景中的的应用
  • PhysicalAgent:基于基础世界模型的通用认知机器人
  • MySQL 8.0物理备份(XtraBackup)加速-全方位解析
  • BrowserUse自动化测试效率优化:Cookie复用实现登录状态持久化
  • 【硬科普】什么是双频干涉
  • 5.0 JKI state machine介绍1 - 安装.
  • 点卡平台网站开发wordpress网站布置
  • React单位转换系统:设计灵活的单位系统与单位系统转换方案
  • React 18 前端最佳实践技术栈清单(2025版)
  • jsp网站开发 开题依据设计一个企业网站大概多少钱
  • 计算机网络---应用层
  • 营销网站的例子公司软件定制开发
  • SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
  • 农作物空间分布数据集整理
  • C# UDP 服务端与客户端2.0
  • Gartner发布威胁情报的演变趋势:成为统一的网络风险情报,更加主动、协作和以行动为中心,以应对不断演变的全球网络威胁
  • 建站快车打电话安装wordpress的目录改变了
  • Spring Boot 2.5集成Elasticsearch(亲测)
  • Eclipse 快速修复
  • 赣州专业网站推广多少钱专门做任务的网站6
  • 如何快速切换网络配置?高效实现IP、MAC、主机名一体化管理
  • Mosquitto 架构分析:解读 mosquitto.c 的核心作用与执行流程
  • 单克隆抗体的核心概念
  • Java 并发锁实战手册:各类锁的特性、适用场景与选择方法论
  • 从化商城网站建设wordpress主题制作全过程
  • 传统网站架构 和 现代云服务 的区别简要分析
  • numpy -- 字符串函数 add()与multiply()
  • 使用Polars和PyTorch完成药物发现
  • 利津网站定制网络游戏投诉平台
  • 网站建设询价做网站必须网站备案