Vue 监听对象集合的变化

发表于2023-03-12|更新于2024-01-09|📔学习笔记

|总字数:86|阅读时长:1分钟| 浏览量:|评论数:

如果只是普通的监听对象的变化，可以使用 watch

1
2
3

'unit.reportedValue'(newVal, oldVal) {
  console.log(this.unit.unitId + ' ' + newVal + ' ' + oldVal)
}

但是如果是监听对象集合的变化，特别是存在子父级关系时，就需要使用 watch 的 deep 属性

unitList: {
  handler(newVal) {
    this.collectList = newVal;
  },
  deep: true
}

Vue 监听对象集合的变化

https://wuxingzzz.top/posts/615380678.html

作者

WXZ

发布于

2023-03-12

更新于

2024-01-09

许可协议

CC BY-NC-SA 4.0

赞助

wechat
alipay

相关推荐

model-value 和 v-model

基础用法v-model 可以在组件上使用以实现双向绑定。从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏： 123456789101112<script setup>const model = defineModel()function update() { model.value++}</script><template> <div>parent bound v-model is: {{ model }}</div></template> 父组件可以用 v-model绑定一个值： 12<Child v-model="count" /> defineModel() 返回的值是一个 ref。它可以像其他 ref...

手机端实现签名

碎碎念今天测试突然给我提了一个手机签名的需求，第一时间想到了用组件写，但是这里我不得不吐槽一个这是一个老项目，用的 bootstrap 和 Mui 框架，这里我不得不吐槽一下这种写完了有什么意义毕竟都是快被淘汰的框架。没办法在网上搜索了一下用 JS 写了一个简单的签名。 Canvas是 HTML5 提供的一种新标签, ie9 才开始支持的，Canvas 是一个矩形区域的画布，可以用 JS 控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。这里我们也是用 Canvas 实现签名。之前的项目写过一个 Vue 版本的签名，说到底都是大同小异，底层都是 Canvas 代码这里我们就列出一些主要的代码，具体功能可以根据自己的需求在更改准备工作 1234567891011121314151617181920212223242526// 获取canvasconst myCanvas =...

server.watchFiles is not a function

Webstorm Vue 2.0.26 报错 12345678910111213141516171819202122232425262728293031323334353637/Users/wxz/Library/Caches/JetBrains/WebStorm2024.2/javascript/typings/@vue/language-server/2.0.26/node_modules/@vue/language-server/lib/initialize.js:56fileWatcher = server.watchFiles(['**/*.{' + [...watchingExtensions].join(',') + '}']);^TypeError: server.watchFiles is not a functionat updateFileWatcher...

uni-app tabbar实现Q弹效果

本篇文章用到了 uni-app 团队出的 uView 框架，如果你还不了解 uView，可以先看看官方文档：uView框架编写组件 123456789101112131415161718192021222324252627<template> <view>  <u-tabbar :value="current" @change="tabbarChange" :safeAreaInsetBottom="false" > <u-tabbar-item text="病人" :name="0" v-if="checkPermi(['system:app:patient'])"> <view class="tabbar-icon custom-icon...

Vue 中 background-image 的使用

Vue 中 background-image 的 url 属性不能直接写字符串，需要使用 require 引入图片，然后使用 v-bind 绑定到 background-image 的 url 属性上 1<view class="loading-img" :style="{background:'url('+require('static/img/IMG_3969.jpeg')+')', backgroundSize:'cover'}"></view>

概念在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 Vue 应用中多个组件的共享状态进行集中式的管理（读 / 写），也是一种组件间通信的方式，且适用于任意组件间通信主要用于多个组件共享数据搭建vuex环境创建文件：src/store/index.js 1234567891011121314151617181920// 引入 Vue 核心库import Vue from 'vue'// 引入 Vueximport Vuex from 'vuex'// 应用 Vuex 插件Vue.use(Vuex)// 准备 actions 对象——响应组件中用户的动作const actions = {}// 准备 mutations 对象——修改 state 中的数据const mutations = {}// 准备 state 对象——保存具体的数据const state = {}// 创建并暴露 storeexport default new...

评论

数据加载中