Vue——02-05监听器-watch
watch：在vue中，使用watch来响应数据的变化，监听异步操作异步场景。
{ { watchFullName} } 无需加()
案例只监听了data中数据的watchFullName的变化
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta http-equiv="X-UA-Compatible" content="IE=edge">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>
监听器/title>
script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
/script>
/head>
body>
!-- watch监听异步操作异步场景监听器后面无需加()
此案例只监听了data中数据的watchFullName的变化
-->
div id="box">
h1>
计算属性：computed/h1>
{
{
fullName}
}
h1>
方法：methods/h1>
{
{
fullName2()}
}
h1>
监听器：watch/h1>
{
{
watchFullName}
}
h1>
年龄/h1>
{
{
age}
}
/div>
script>
var other = 'This is other';
var box = new Vue({
el:'#box',
data:{
firstName:'Nan',
lastName:'Chen',
age:18,
watchFullName:'NanChen',
}
,
methods: {
fullName2:function(){
console.log("调用了fullName,执行了一次方法")
fullName2 = this.firstName+this.lastName+","+other;
return fullName2;
}
}
,
computed: {
fullName:function(){
console.log("调用了fullName,计算了一次属性")
return this.firstName+this.lastName+","+other;
}
}
,
watch:{
immediate: true,
firstName:function(newName,oldName){
console.log("lastName触发了watch,newLastName="+newName+",oldLastName="+oldName);
this.watchFullName = this.firstName+this.lastName+","+other;
}
,
lastName:function(newName, oldName){
console.log("lastName触发了watch,newLastName="+newName+",oldLastName="+oldName)
this.watchFullName = this.firstName+this.lastName+","+other
}
,
}
}
)
/script>
/body>
/html>
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。
那如何去修改年龄（age）呢？
可以直接在控制台写
box.age=80
这里的方法需要重新执行，而watch中没有age属性所以不用在执行一遍
如何更改other的值？
因为不是box中的元素所以可以直接写other
这里没有发生任何变化再次修改firstName就会进行重新渲染
原因：是因为我们调用firstName的时候触发了所有的方法包括更改后的watch，上面已经改为了新的值，所以也会跟着改。在实例外的对象，它并不是一修改就有的。而是在修改之后再次修改实例内置对象，它才会更改。
结论：
使用computed计算了fullName属性，值为firstName+lastName。
计算属性具有缓存功能，当firstName和lastName都不改变的时候，fullName不会重新计算，比如我们改变age的值，fullName的值是不需要重新计算的。
methods并没有缓存特性，比如我们改变age的值，fullName2()方法会被执行一遍。
当一个功能可以用上面三个方法来实现的时候，明显使用computed更合适，代码简单也有缓存特性。
计算属性范围在vue实例内，修改vue实例外部对象，不会重新计算渲染，但是如果先修改了vue实例外对象，在修改vue计算属性的对象，那么外部对象的值也会重新渲染。
computed和watch
computed：计算属性范围在Vue实例的fullName内所管理的firstName和lastName,通常监听多个变量
watch：监听数据变化，一般只监听一个变量或数组
使用watch深度监听01
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
/title>
/head>
body>
div id="app">
p>
FullName: {
{
person.fullname}
}
/p>
p>
FirstName: input type="text" v-model="person.firstname">
/p>
/div>
script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
/script>
script>
const app = new Vue({
el: "#app",
data() {
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
}
,
methods: {
}
,
computed: {
person2(){
return JSON.parse(JSON.stringify(this.person));
}
//解决深度监听新老值同源问题
}
,
watch:{
person2:{
handler(n,o){
console.log(this.person);
console.log(n.firstname);
console.log(o.firstname);
/* this.person.fullname = this.person.firstname + this.person.lastname */
}
,
/* immediate: true, */
deep: true // 可以深度检测到 person 对象的属性值的变化
}
}
}
)
/script>
/body>
/html>
watch深度监听02
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
/title>
/head>
body>
div id="app">
h2>
{
{
sum}
}
/h2>
button @click="sum++">
点击/button>
p>
FullName: {
{
person.fullname}
}
/p>
p>
FirstName: input type="text" v-model="person.firstname">
/p>
/div>
script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
/script>
script>
const app = new Vue({
el: "#app",
data() {
return {
sum:0,
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
}
,
methods: {
}
,
computed: {
person2(){
return JSON.parse(JSON.stringify(this.person));
}
//解决深度监听新老值同源问题
}
,
watch:{
person2:{
handler(n,o){
console.log(this.person);
console.log(n.firstname);
console.log(o.firstname);
/* this.person.fullname = this.person.firstname + this.person.lastname */
}
,
/* immediate: true, */
deep: true // 可以深度检测到 person 对象的属性值的变化
}
,
sum:{
handler(n,o){
console.log('sum的值变化了',n,o);
}
}
}
}
)
/script>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Vue——02-05监听器-watch
本文地址： https://pptw.com/jishu/8603.html