Vue学习之监听methods、watch及computed比较小结（十一）
程序员文章站
2022-05-15 14:53:42
一、三者之间的对比： 1、methods方法表示一个具体的操作，主要书写业务逻辑； 2、watch；一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体业务逻辑操作；可以看作是”computed"和“methods”的结合体； 3、computed属性的 ......
一、三者之间的对比：
1、methods方法表示一个具体的操作，主要书写业务逻辑；
2、watch；一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体业务逻辑操作；可以看作是”computed"和“methods”的结合体；
3、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。
二、methods：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" @keyup="getfullname" /> +
<input type="text" v-model="lastname" @keyup="getfullname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
getfullname() {
this.fullname = this.firstname + "-" + this.lastname;
}
}
});
</script>
</body>
</html>
2、watch:
使用这个属性，可以监视 data中指定数据的变化，然后触发这个watch中对应的function处理函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="firstname" @keyup="getfullname" /> +
<input type="text" v-model="lastname" @keyup="getfullname" /> = -->
<input type="text" v-model="firstname" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new vue({
el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
// getfullname() {
// this.fullname = this.firstname + "-" + this.lastname;
// }
},
watch: {
firstname: function(newval, oldval) {
this.fullname = newval + "-" + this.lastname;
},
lastname: function(newval) {
this.fullname = this.firstname + "-" + newval;
}
}
});
</script>
</body>
</html>
3、watch监听路由地址的变化：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
<!-- 1.导包 -->
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
//2.创建子组件
var login = {
template: "<h3>这是登录子组件</h3>"
};
var register = {
template: "<h3>这是注册子组件</h3>"
};
//3.创建一个路由对象
var router = new vuerouter({
routes: [
//路由规则数组
{ path: "/", redirect: "/login" },
{ path: "/login", component: login },
{ path: "/register", component: register }
],
linkactiveclass: "myactive" //和激活有关的类
});
var vm = new vue({
el: "#app",
data: {
},
methods: {},
router,
watch: {
"$route.path": function(newval, oldval) {
if (newval === "/login") {
console.log("欢迎进入登录页面");
} else if (newval === "/register") {
console.log("欢迎进入注册页面");
}
}
}
});
</script>
</body>
</html>
4、computed：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>methods实现名称拼接</title>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" /> +
<input type="text" v-model="middlename" /> +
<input type="text" v-model="lastname" /> =
<input type="text" v-model="fullname" />
</div>
<script>
var vm = new vue({
el: "#app",
data: {
firstname: "",
middlename: "",
lastname: ""
},
methods: {},
watch: {},
computed: {
fullname: function() {
console.log("ok");
return this.firstname + "-" + this.middlename + "-" + this.lastname;
}
}
});
</script>
</body>
</html>
在computed 中，可以定义一些属性，这些属性 ，叫做 【计算属性】，计算属性的本质就是一个方法。
只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性当作方法去调用。
需要注意的是：
①、计算属性在引用的时候，一定不要加（)去调用，直接把它当作 普通属性去使用就好了；
②、只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值；
③、计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则 不会重新对 计算属性求值。