vue 计算属性 vs 方法， 过滤器
vue 计算属性 vs 方法， 过滤器
最近换项目了，终于重新开始 使用 vue 了 ， 继续学习中
computed
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
变量处理的任何复杂逻辑，你都应当使用计算属性
非常重要： 仅依赖变化才会更新数据
computed 属性是不能通过 this.property 来修改的，赋值的化（无setter）会报错， 修改的话不生效
Vue 过滤器
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
组件的 update 都会导致过滤器的执行, 就像下面的 method中的方法一样
Vue 计算属性 vs 方法
官方： 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是 计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。 这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
如果你不希望有缓存，请用方法来替代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>reactive</title>
<style>
[v-cloak] {
display: none;
}
</style>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- <script src="../babel.min.js"></script> -->
</head>
<body>
<div id="app">
<input type="text" v-model="initialValue">
<br>
<span v-cloak>{
{ value }}</span>
<br>
<span v-cloak>{
{formatValue()}}</span>
<br>
<span v-cloak>{
{ init }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/babel">
// 计算属性 vs 方法
const app = new Vue({
el: #app,
data: {
initialValue: 好吃,
init: value changed
},
methods: {
formatValue() {
console.log(方法执行了);
return this.initialValue.split().reverse().join();
// return Date.now();
}
},
beforeUpdate(){
console.log(beforeUpdated);
},
updated(){
console.log(updated);
},
computed: {
value() {
return this.initialValue.split().reverse().join();
// return Date.now();
}
}
});
</script>
</body>
</html>
我们可以通过 input（view） 影响 model 或者通过 model 去影响 view 来验证，且看控制台打印
- 在浏览器中， 输入 文字的时候(组建 update)， 在控制台中 可以看见 methods 方法一直在执行
- 在控制台中 通过 app.init = 123 赋值（组件 update）的时候， methods 中对应 方法也会执行
总结如下： 当 viewModel 检测数据或视图变化并进行更新操作的时候， methods 中对应的方法就会执行
两个方法可以达到同样的目的，就是开销问题
上一篇：
IDEA上Java项目控制台中文乱码