vue监听对象数据变化
时间: 2023-11-24 20:47:36 浏览: 30
可以使用Vue的watch属性来监听对象数据的变化。具体实现方法如下:
```javascript
watch: {
obj: {
handler: function (newVal, oldVal) {
console.log('obj changed')
},
deep: true
}
}
```
其中,obj是要监听的对象,handler是当obj发生变化时要执行的函数,deep为true表示深度监听,即当obj内部的属性发生变化时也会触发handler函数。
相关问题
vue3监听对象数据变化
在 Vue3 中,可以使用 `reactive` 函数将一个普通对象转换为响应式对象,然后使用 `watch` 函数监听响应式对象的变化。具体实现如下:
```javascript
import { reactive, watch } from 'vue'
const obj = reactive({
name: '张三',
age: 18
})
watch(() => obj.name, (newVal, oldVal) => {
console.log(`name 从 ${oldVal} 变成了 ${newVal}`)
})
```
在上面的代码中,我们使用 `reactive` 函数将 `obj` 对象转换为响应式对象,然后使用 `watch` 函数监听 `obj.name` 属性的变化。当 `obj.name` 属性发生变化时,会触发回调函数并输出变化前后的值。
vue监听localStorage的数据变化
可以通过使用`window.addEventListener`来监听`storage`事件,从而实现监听`localStorage`的数据变化。具体的实现如下:
```js
window.addEventListener('storage', function(e) {
if (e.key === 'localStorageKey') {
// 处理localStorage数据变化的逻辑
}
})
```
其中,`e`参数是一个`StorageEvent`对象,包含了一些有用的信息,比如`key`属性表示发生变化的`localStorage`的键名。在回调函数中,可以根据需要对`localStorage`中相应的数据进行处理。
需要注意的是,`storage`事件是在除当前窗口外的其他窗口或标签页中发生`localStorage`变化时才会触发的,如果在当前窗口中修改了`localStorage`的值,`storage`事件并不会触发。