创建的事件(Vue)中监视属性与$watch方法的差异
创建的事件(Vue)中监视属性与$watch方法的差异：
在Vue中，我们可以使用监视属性来监听数据的变化并执行相应的操作。监视属性有两种方式：通过创建的事件和使用$watch方法。它们之间有以下几点差异：
- 语法形式：
- 创建的事件：通过在Vue实例中使用
watch选项来创建监视属性，语法形式为watch: { key: handler }。 - $watch方法：通过在Vue实例中使用
$watch方法来创建监视属性，语法形式为vm.$watch(expOrFn, callback, [options])。
- 创建的事件：通过在Vue实例中使用
- 功能：
- 创建的事件：可以监听一个或多个数据的变化，并在数据变化时执行相应的操作。
- $watch方法：可以监听一个具体的表达式或函数的返回值，并在其变化时执行相应的操作。
- 范围：
- 创建的事件：可以在Vue实例的
watch选项中创建监视属性，作用范围为整个Vue实例。 - $watch方法：可以在Vue实例中的任意位置调用
$watch方法创建监视属性，作用范围可以更加灵活。
- 创建的事件：可以在Vue实例的
- 触发时机：
- 创建的事件：在Vue实例初始化时就会创建监视属性，并在数据变化时立即执行相应的操作。
- $watch方法：可以在任意时刻调用
$watch方法创建监视属性，并在数据变化时执行相应的操作。
- 监视的数据类型：
- 创建的事件：可以监视Vue实例中的任意数据属性，包括普通的数据属性、计算属性和侦听属性。
- $watch方法：可以监视任意表达式或函数的返回值，不限于Vue实例中的数据属性。
综上所述，创建的事件和$watch方法都可以用于监听数据的变化，但在语法形式、功能、范围、触发时机和监视的数据类型等方面存在一些差异。具体使用哪种方式取决于实际需求和场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器 CVM：https://cloud.tencent.com/product/cvm
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台 AI Lab：https://cloud.tencent.com/product/ailab
- 云数据库 TencentDB：https://cloud.tencent.com/product/cdb
- 云存储 COS：https://cloud.tencent.com/product/cos
- 区块链服务 TBCAS：https://cloud.tencent.com/product/tbcas
- 物联网平台 IoT Explorer：https://cloud.tencent.com/product/ioe
相关·内容
2回答
首先，我有一个Vue JS文件--
export var myVue = new Vue({
el: '#myApp',
data: {
myCoordinates: new Set() // simple integers
},
methods: {
addCoordinates (c) {
this.myCoordinates.add(c);
}
}
}
然后我有另一个JS文件，它导入了Vue并做了一些绘图--
import { myVue } from '
浏览 5提问于2018-06-17得票数 0
$watch可以在Vue.js中监听道具吗？
我在实验室测试，发现我看不到道具：
在我的index.vue中：
<test-com :data="pass_data"></test-com>
...
export default {
data(){
return {
pass_data: {a:'a', b:'b'}
...
}
}
methods: {
add_select_data(){
this.pass_data.c = 'c
浏览 3提问于2018-04-06得票数 0
2回答
我在下面有一个vue组件，我想要观察它，以便在它挂载时触发。我该怎么做？
Vue.component('check-mark', {
name: 'check-mark',
template: `
<input :value="value">
`,
props: {
value: {
type: String,
required: true,
},
},
mounted: async function
浏览 1提问于2017-07-21得票数 24
回答已采纳
为什么观看只触发一次？如下代码所示，当点击'sync‘按钮时，id和text同时改变，但只有id() watch被触发，需要再次点击'sync’按钮才能触发text() watch，为什么？ Vue.component('test-bar', {
props: ['id', 'text'],
template: `
<div>
<div>child: {{id}} {{text}}</div>
<button @click="
浏览 57提问于2019-03-21得票数 3
回答已采纳
我试着用下面的方式观察HTML元素： computed: {
content(){
return document.querySelector(".tab-content")
}
},
watch: {
content(newVal) {
return newVal;
}
} 但是当.tab-content改变(它是innerHTML)时，vue不会跟踪/响应。知道为什么吗？
浏览 11提问于2019-04-22得票数 0
我完全是网页开发的新手，我有Vue.js项目，在created()函数上，我解析和打印数据，因为我猜它是连接函数，在页面呈现阶段调用之类的。我想在用户修改输入值之后调用created()。
我用的是v-model和watch
watch: {
myvalueChanged: function(newVal, oldVal){
console.log("%s %s", newVal, oldVal);
// I want call created() again from here
}
}
我该怎么做？我想再次调用created()，而不是重新加载页面
浏览 4提问于2018-09-30得票数 0
回答已采纳
我正在编写一个Vue单元测试，我需要模拟一个被触发的监视器。 我最初尝试通过更改被监视的属性的值来触发它，但这并没有触发监视器。 在阅读了一个great article之后，我意识到我应该触发观察器，而不需要我的测试来检查观察器是否工作。 他们基本上建议您可以通过以下方式触发观察器： const wrapper = shallowMount(YourComponent);
wrapper.vm.$options.watch.someWatchedProperty.call(wrapper.vm, 'someData'); 然而，这似乎不适用于使用Vue的实例方法$watch
浏览 19提问于2020-06-12得票数 1
更新：
通过更改resetArray，我在MCV中达到了预期的行为。
function resetArray() {
// myArray.value = [] // old version
myArray.value.length = 0 // new version
}
但我还是不明白为什么我的MCV不能工作。
原始帖子：
背景
在我正在构建的应用程序中，我将数据存储在一个ref中，该const myArray = ref([])以对象数组的形式创建。此数组仅通过以下方式进行更改：
myArray.value[index] = {key: value}
myArray.va
浏览 6提问于2022-03-03得票数 0
回答已采纳
1回答
我有一个包含布尔值的vue.js存储，我需要检测组件内部的变化情况。当userEnabled发生变化时，我需要在组件中调用一个方法。我不需要计算新的值。
我的问题是，我应该为此使用'watch'，还是有更有效的方法？如果是这样的话，我应该在“挂载”内配置手表吗？
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state : {
userEnable
浏览 0提问于2018-09-02得票数 2
回答已采纳
1回答
我在vue 3中创建了一个过滤的动态模型，并且在清除(空对象)时出现了一些问题。
setup() {
const model = ref({});
watch(model.value, (value) => {
console.log("model changed");
console.log(model.value);
});
const addLanguage = (language) => {
model.value["meta_" + language.toLowerC
浏览 5提问于2022-03-20得票数 0
回答已采纳
1回答
背景
考虑以下非常基本的插件：
import SomeObject from "./SomeObject";
/**
* Some Cool Plugin...
*/
export default {
install(Vue){
Vue.prototype.$someObject = Vue.observable(SomeObject);
}
}
上面的目的是在整个应用程序中注册一个对象为反应性对象。
问题与问题
Vue.prototype.$someObject包含需要在全局级别而不是组件级别上为watched的某些属性。
有没有一种
浏览 0提问于2019-10-07得票数 3
回答已采纳
我正在使用Vue.js 3。我遇到了一个问题，让我们先看看代码。
码
ChildComponent.vue
<template>
<div>
{{ modelValue }}
<input v-model="resultString"/>
<button @click="showModelValue">show model value</button>
</div>
</template>
<script lang="ts">
impor
浏览 8提问于2022-04-27得票数 0
回答已采纳
1回答
我在前端用Vue.js做了一些实验，我定义了一个这样的组件： <template id="order-item">
<select v-model="item.product">
...
</select>
<input type="number" v-model="item.quantity">
<textarea v-model="item.variants"></textarea>
&
浏览 11提问于2020-06-20得票数 0
回答已采纳
在Vue中watch属性和$watch方法有什么不同吗？例如，我试图理解作者为什么在下面的代码中使用$watch事件而不是watch属性。 created () {
const routes = this.mainMenu.find(item => item.path === '/')
this.menus = (routes && routes.children) || []
// 处理侧栏收起状态
this.$watch('collapsed', () => {
this.$stor
浏览 18提问于2021-06-29得票数 1
回答已采纳
当我从下面的第一个代码块传递给第二个代码块时，我无法让watch函数触发。我得到了params，因为我可以在刷新时注册它，但是它没有被监视。
第一块
<template>
<router-link :to="{ name: 'page', params: { mus: mus } }">
<q-btn
filled
label="Get"
/></router-link>
</template>
<script>
impo
浏览 5提问于2022-03-30得票数 0
回答已采纳
我有标准的Vue.js组件，我想将data属性中的属性转换为监视器，或者换句话说，我想基于data属性属性自动构造一个watch对象
我的想法是这样的
watch: {
...(() => {
const watchers = {}
Object.keys(this.$data).forEach(key => {
watchers[key] = () => {
new ProductNutrientUpdate(this).run()
}
})
return wa
浏览 1提问于2019-05-13得票数 0
2回答
我已经在设置中设置了这个反应性值。
const refValue = ref('foo');
并将watch函数设置为
watch(refValue, function() {
console.log("activaded")
});
如果手动更改值，则不会激活watch函数，
只有在添加更改值的函数时，它才会被激活。
const changeValue = function changedValue() {
console.log("fired");
return refVa
浏览 3提问于2021-04-18得票数 1
回答已采纳
我预计这段代码会创建一个无限循环，因为被监视的对象在watch处理程序中发生了变化： const App = {
setup() {
const state = Vue.reactive({
name: "",
message: "Welcome stranger"
});
Vue.watch(state, () => state.message = `Hello ${state.name}`);
return state;
}
};
Vue.createApp(App).mou
浏览 34提问于2021-08-21得票数 0
1回答
我将与Vue3结合使用：
<v-ace-editor
v-model:value="currentRecord.prompt"
lang="json"
theme="textmate"
style="height: 100%;"
:options="{
showGutter: pipeline.input_mode!=='text',
showPrintMargin: false,
useWorker: true,
浏览 14提问于2022-05-13得票数 0
回答已采纳
1回答
有人能建议我如何创建一个服务来覆盖angular js默认的$watch和$digest循环吗？
我的要求是使用侦听器对一个作用域对象进行$watch，侦听器函数应该有4个参数，@param1 - newObject，@param2 - oldObject，@param3 -已更改的确切属性，@param4 -该对象中的属性与已更改的属性的继承关系。
要求:-
$scope.$watch('objectName', function(param1,param2,param3,param4){
//log param3 and param4 in a stack for l
浏览 1提问于2013-11-11得票数 0
1回答
我们正在创建一个We应用程序来观察分析变化并实时更新它们(这不应该很重要，我只是想让你知道)。
在Vue.js的官方网站上，他们有一个使用观察者的例子。
代码：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question" />
</p>
<p>{{ answer }}</p>
</div>
<!-- Since there is already a
浏览 0提问于2021-05-19得票数 2
1回答
Vue 2.x chart-js: 2.x vue-chartjs: 3.x 我从父组件向子组件发送来自websocket的数据，并计划在子组件中生成折线图(考虑不断更新折线图)。 Parent.vue <template>
<v-container>
<ChartComponent :aqiLineChartData="aqiLineChartData"/>
</v-container>
</template>
<script>
.
data: function () {
浏览 42提问于2021-05-07得票数 0
2回答
Vue允许有监视给定属性(甚至嵌套的)的观察者：
// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
// do something
})
但是，给定这样一个vue实例：
var vm = new Vue({
data: {
options: {
a: 1,
b: 2,
c: 3
}
},
})
是否有一种方法可以监视options，以便在使用key和value更改任何子属性时通知我
注释：，我也希望获得更改后的值与之相关的键。
会以这样的方式回应的东
浏览 4提问于2017-03-30得票数 1
回答已采纳
我想在我的Dashboard.vue上画一个折线图。x-axis和Y-axis上的数据来自我的vuex商店。当我在浏览器上查看Vue插件时，我可以看到商店中的数据正在被访问。这是我的LineChart.js文件版本(图表逻辑所在的位置)。 import { Line } from 'vue-chartjs'
export default ({
extends: Line,
data() {
return {
xAxis: [],
yAxis: [],
title: "My activities"
浏览 26提问于2019-02-06得票数 0
1回答
我有一个Vuex商店，在一个有点大的web应用程序中提供许多Vue组件。我希望能够查看Vuex状态或用于日志记录的getter。然而，我希望能够“全球”地观看它们，即不依赖于任何特定的Vue组件。这就排除了像
//aComponent.vue
watch:{ '$store.state.data'(value, oldValue) { /*do something here*/ }}
和
//App.vue
created() {
this.$store.watch((state) => state.watchedState) => {/*do somethin
浏览 1提问于2019-03-17得票数 1
回答已采纳
1回答
Vue2如何观看全局原型
、、、
我有这个原型Vue.prototype.$onWindowLoad = false;，在一个组件中，我想对这个变量设置一个观察器。但是，我似乎无法访问全局原型或观察者选项中的根实例。
watch: {
'$root.$onWindowLoad': function(){
console.log("works???");
}
}
遗憾的是，我不能在watch选项中使用this，可以查看这些数据吗？
浏览 4提问于2021-04-29得票数 0
1回答
我正在申请vue。我面临的问题是，我只想将已更改/唯一的对象添加到新数组中。
它不断地添加重复的对象。我确信这是我的一个愚蠢的错误，但我似乎找不到它。
<script>
export default {
data() {
return {
changedArray: [],
originalArray: [
{key1:val1},
{key1:val2},
{key1:val3}
]
};
},
created() {
this.originalAr
浏览 1提问于2021-05-18得票数 0
2回答
App.vue
<HeaderPart></HeaderPart>
<router-view />
<PlayerBar v-if="audio"></PlayerBar>
我想用函数来隐藏/显示这个PlayerBar，在main.js中我已经创建了所有的函数来改变音频值。
Vue.mixin({
data: function() {
return {
baseURL: "https://sampleurl",
authToken: "sampleauth&#
浏览 0提问于2020-12-10得票数 0
我理解，当正在监视的属性/数据被更改/重新分配时，将触发该属性/数据的监视方法。
但是，在这个代码片段中，initTasks的watch方法是被触发的，尽管initTasks没有被更改/触摸(至少看起来是这样)。
这个代码段应该在每次添加任务时增加“估计值”。但是，估计值不会增加，因为每次都会被initTask的watch方法覆盖。
Vue.component('customcomponent', {
props: ['initTasks', 'initEstimate'],
data() {
return {
ta
浏览 1提问于2019-01-30得票数 0
回答已采纳
我对单元测试很陌生，我正在尝试测试在组件挂载时调用的函数。下面是我正在测试的组件代码：
<template>
<div>
<div class="grid">
<Card
class="grid_layout_col"
@showItemDetail="showDetails(index)"
@openEditModal="editItem(index)"
/>
</div>
浏览 3提问于2020-02-20得票数 1
回答已采纳
1回答
我想在ajax调用运行时显示一些代理文本。此外，当调用完成时，我希望隐藏文本。因此，我编写了两个组件，一个是AppBody，它将在其插槽中保存一个用于模拟ajax调用的按钮。另一个是DownloadBtn，execute方法将在其中执行ajax调用。在ajax调用之前和之后，我更改了一个名为loaderStatus的变量的值，并观察该变量的变化。每当变量发生更改时，它都会发出一个名为download的自定义事件。在收到来自子组件DownloadBtn的事件后，AppBody组件在vue实例的doSomething方法内确认了该事件，并更改了另一个名为loadSpinner的变量。我将此loa
浏览 22提问于2019-06-13得票数 0
问题
事件在一个区段组件中触发，每个同级组件触发相同的事件。
换句话说，如果在customer部分中修改了call对象，那么syncCall方法会触发两次。一次是因为客户部分，一次是因为定价部分。
上下文
call组件实现每个节组件，如下所示。
Call.vue (父)
<template>
<customer-section
:callObject="call"
@change.self="syncCall">
</customer-section>
<pricing-section
浏览 0提问于2017-03-23得票数 0
回答已采纳
我需要查看的vue资源HTTP请求。如果发现了新数据，我希望将推送到v-for循环，如果发现的数据被删除，则希望删除，而无需重新呈现整个v-for数据。
JS
new Vue({
el: '#chats',
http: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
},
data: {
chats: []
浏览 2提问于2016-09-11得票数 1
2回答
如何在vue js中使用监视功能
、、、、
请您告诉我如何在vue js中使用.I试图使用的watch函数，但我得到了这个错误。
vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"
found in
---> &l
浏览 2提问于2017-09-02得票数 1
6回答
虽然在watch模块中有许多高级的使用场景，但是没有关于如何查看组件道具的示例。
在或中也没有提到这一点。
我创建了一个来阐述这个问题。
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<br>
<p>Prop watch demo with select input using v-model:</p>
<PropWatchDemo :selec
浏览 7提问于2019-12-01得票数 108
回答已采纳
1回答
vue.js手表未更新
、、、
我是vue新手。我现在正在尝试根据另一个计算变量的变化来更新两个变量。 此计算变量从Vuex存储中获取值，并正常工作。我看到这些值发生了变化。为了计算派生变量，我创建了一个监视计算的变量，然后更新这些派生值。此监视在启动期间被调用两次，然后不再调用，尽管计算值不断更新。我做错了什么。 这是有效的： ...
computed: {
lastAndMarkPrice() {
return store.getters.getLastAndMarkPriceByExchange(
"deribit",
store.getters.g
浏览 16提问于2020-07-19得票数 1
回答已采纳
我正在处理一个项目，在这个项目中，我需要在路由加载完成后调用一个函数。但是，当使用“watch”功能时，它只在路由更改时加载，但在路由完成加载之前加载。因此，当我尝试运行一个针对页面上的DOM元素的脚本时，这些元素还不存在。Vue Router中有没有什么功能可以让我在运行脚本之前等待所有东西都被渲染出来？
const app = new Vue({
el: '#app',
router,
watch: {
'$route': function (from, to) {
function SOMEF
浏览 1提问于2018-09-24得票数 11
我正在尝试使用@vue/apollo-composable在Vue 2中使用useQuery。 这是我的设置函数： setup(props,ctx){
const product = ref(null);
const param = usePram();
const currentProduct = computed(()=>product?.value?.prop || {nope:true};
const getProduct = () => {
if(sku.value){
product.value = provideApolloCli
浏览 141提问于2021-03-26得票数 1
回答已采纳
我试图在Vue js的computed区域中的数组中找到答案的索引，但是我得到了一个错误，即出现了一些意想不到的副作用。
代码:-
<script>
import _ from "lodash";
export default {
name: "QuestionBottom",
props: {
currentQuestion: Object,
nextQuestion: Function,
increment: Function,
},
data() {
return {
selecte
浏览 2提问于2021-03-23得票数 2
回答已采纳
考虑一下下面这些琐碎的应用：
<div id="app">
<counters :counter1="counter1" :counter2="counter2">
</counters>
<button @click="onClick">Click Here</button>
</div>
JS：
Vue.component('counters', {
template: '<h1>{{counter1.c
浏览 3提问于2018-03-31得票数 7
回答已采纳
2回答
我和BootstrapVue一起工作。
我有一个b-form-select，其中我在name (= text字段)的选择中显示在我的child.vue和emit my age (=value字段)到我的parent.vue中。这个效果很好。
现在我也想要show我的name，所以我的文本字段-在我的child.vue template -我如何实现这一点？
现在，我使用watch来检测被选中时的更改，并emit这个value。但在这里，我也想检查我的text-field和“打印”它在我的b-form-select下面。
我的模板(child.vue)
<b-form-select v-m
浏览 1提问于2021-11-16得票数 1
2回答
我是Vue和Axios的新手，并试图在Salesforce营销云云页面中使用它。基本上有三部分，
HTML + vue页面:这是一个表单页面，其中要求用户输入自动化名称并单击send buttonApp.js :，这是使用axios和Vue.Form-hander.js (后端)：运行自动化的 SSJS代码构建的。
我引用了这个文档来构建这个设置- -。我理解Form-hander.js (ssjs)代码，这可以跳过。
我无法理解的是App.js的流程，请任何人解释一下这里发生了什么。据我所知，在单击发送按钮时，调用了App.js - validateForm中的函数.在我不理解代码流之后。表
浏览 10提问于2022-03-13得票数 0
回答已采纳
在我正在开发的Vue应用程序中，有许多表单组件可用于创建新记录或修改现有记录。当表单打开时，也可以单击另一个记录或单击创建，在这种情况下，表单的内容将分别被替换或清除。
我遇到的问题是，我似乎无法避免我的data函数和watch函数之间的大量重复。
下面是我所指的这类事情的一个简化示例：
props: ["record"],
data() {
return {
name: this.record ? this.record.name : "",
age: this.record ? this.record.age : nu
浏览 34提问于2018-07-18得票数 2
回答已采纳
我在对象内部有数组
Vue.component('greeting', {
template: '<button @click="cool">getdate! </button> ',
data :function () {
return {
message:"15/10/1999",
}
},
methods:{
cool(){
this.$parent.in
浏览 0提问于2018-12-18得票数 1
回答已采纳
1回答
我有我的vue-router的代码
{
path: '/templates/:id/items/:itemId', component: Item,
name: 'item'
},
在item对象上，我有一个计算属性templateId
templateId() {
return parseInt(this.$route.params.id, 10);
},
我遇到的问题是，每次我在url中添加一个锚点(单击item组件内部的链接)时，即使组件没有改变，也会再次计算该属性。
这意味着将再次计算所有依赖于templateId的计算属性。
，但是
浏览 2提问于2019-06-02得票数 5
回答已采纳
为什么更改前创建/创建/安装前的数据不能触发VUE中的监视？
<template>
<div>
<titi :namer="parentName"></titi>
</div>
</template>
<script>
export default {
components: {
titi: {
template: "<h1>{{namer}}</h1>",
props: ["namer"
浏览 4提问于2019-11-22得票数 0
回答已采纳
1回答
Vue 3-组件未加载或呈现
、、、、
我有以下内容：
<script setup>
import {defineProps, ref, watch} from "vue";
import ProductsComponent from '@/components/Products.vue'
import OrdersComponent from '@/components/Orders.vue'
import {useTableOrderStore} from "@/store/tableOrder";
const tableOrderStore = u
浏览 3提问于2022-07-04得票数 0
回答已采纳
我试图在我在package.json中定义的“测试”脚本中添加一个观察者。
我想要实现的非常简单:我希望每次修改以.spec.js结尾的文件时，都要执行命令行"npm运行测试“。
当我运行"npm运行测试“时，我得到的是以下几行：
我是这样修改脚本以获得观察者的：
"test": "mocha-webpack --webpack-config=node\_modules/laravel-mix/setup/webpack.config.js --require tests/Frontend/setup.js tests/Frontend/\*
浏览 1提问于2020-03-18得票数 1
1回答
我有一个组件，该组件是基于活动的路由隐藏的，它启动了一个使用vuex存储的函数。
它的工作原理是，sidenav隐藏在登录、注销和注册时。
但是，我注意到，当我在通过身份验证的页面(如管理面板或仪表板等)上时，组件将正确显示，但当/如果有人重新加载该网页时，该组件将消失，只会在单击指向另一个页面的链接时显示。
App.Vue
<template>
<div id="app">
<navbar />
<sidenav v-show="sidenav_toggle" />
浏览 1提问于2019-03-07得票数 1
回答已采纳
我是vue新手，一个文档说我每次创建一个组件都必须运行npm run dev和npm run watch。却不知道他们的目的是什么？有人能帮我吗？
浏览 1提问于2019-11-06得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
