Vue watch的函数不被执行，在监视的数据变动情况下
本帖最后由 ing 于 2020-7-6 08:35 编辑问题来源：主要是 watch 监听的是对象导致了这一问题，还有 在这个组件上使用 v-model
————————————————————————————————————————————————————————————————————
最奇怪的是生命周期函数 created 被提示“从未使用”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<base-input v-bind:user="user"></base-input>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
user:{
name:'',
firstName:'test',
lastName:''
}
},
watch:{
user:function () {//一旦user内容发生改变这个函数应该被立刻调用(实际没有)
this.debouncedGetName();
console.log("user:function ()");
}
},
created:function() {
this.debouncedGetName = _.debounce(this.getName,600)
},
methods:{
getName:function(){
let lastname = new Array();
this.user.firstName = this.user.name.split(' ');
if (this.user.name.split(' ').length > 1)
for (let i = 1; i<this.user.name.split(' ').length; i++)
lastname = this.user.name.split(' ');
this.user.lastName = lastname.join('');
console.log("getName:function ()");
}
},
components:{
"base-input":{
props:['user'],
template:`
<div>
<input type="text" v-model="user.name">
<slot>
<p>FitstName:{{user.firstName}}</p>
<p>LastName:{{user.lastName}}</p>
</slot>
</div>
`
}
}
});
</script>
</body>
</html> 本帖最后由 ing 于 2020-7-6 09:06 编辑
https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model
<div id = "app">
<base-input :user="user" v-model="user.name"></base-input>
</div>
<script type="text/javascript">
var datas = {
user:{
name:'',
firstName:'',
lastName:''
}
};
var vm = new Vue({
el:'#app',
data:datas,
watch:{
// 监听 user 对象无法检测到对象内容的变化，
// 以至于 name 的改变没有使函数触发
'user.name':function () {
this.debouncedGetName();
}
},
created:function(){
this.debouncedGetName = _.debounce(this.getName,600)
},
methods:{
getName:function(){
let lastname = [];
this.user.firstName = this.user.name.split(' ');
if (this.user.name.split(' ').length > 1)
for (let i = 1; i<this.user.name.split(' ').length; i++)
lastname = this.user.name.split(' ');
this.user.lastName = lastname.join('');
}
},
components:{
"base-input":{
props: ['value','user'],
template:`
<div>
<input type="text" @input="$emit('input',$event.target.value)">
<slot>
<p>FitstName:{{user.firstName}}</p>
<p>LastName:{{user.lastName}}</p>
</slot>
</div>
`
}
}
});
</script>
兄弟，你的 watch，created，methods里的函数写错地方了，你应该写子组件里，不是写在父组件里 个人看法：watch在user函数发生之前都己经被执行完了。简单的说即使楼上大佬说的对。 应该重新看下vue的结构..不得不说,复议2楼 二楼正解 ing 发表于 2020-7-6 08:26
https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94% ...
我记得vue官网明确说了，父子组件通信时，子组件不得修改父组件的信息，必须通过事件委托触发事件向上冒泡进而修改父组件的数据，可是我看你的虽然能解决问题，但是子组件修改数据导致父组件的数据也修改了，至于watch的监听默认是不能监听对象和列表的，可以使用deep属性进行深度监听，当然也可以用的你这种方法 好了，又把Vue中watch整体都摸索了一遍，{:301_973:}{:301_973:}{:301_973:}{:301_973:}{:301_973:}{:301_973:}
页:
[1]