计算属性

在 Vue.js 中，计算属性是一种基于它们的依赖进行缓存的响应式属性。计算属性在模板中被当作普通属性来使用，但它们实际上是基于它们的依赖（即其他数据属性）动态计算出来的值。

定义计算属性

在 Vue 组件中，可以通过 computed 选项来定义计算属性。计算属性是一个对象，其键是计算属性的名称，值是一个函数，该函数返回计算属性的值。

 <div id="app"><div>计算属性--{{reversedMsg}}</div><div>计算属性--{{reversedMsg}}</div><div>方法--{{reverse()}}</div><div>方法--{{reverse()}}</div></div><script>//  表达式的计算逻辑可能会比较复杂,使用计算属性可以使魔板内容更加简洁var vm = new Vue({el: '#app',data: {msg: '焦虑'},//计算属性在 Vue 组件的 computed 选项中进行定义computed: {//反转字符串reversedMsg: function() {console.log('调用了计算属性');return this.msg.split('').reverse().join('');}},methods: {reverse: function() {console.log('调用了方法');return this.msg.split('').reverse().join('');}}})</script>

计算属性的特点

缓存：

计算属性是基于它们的依赖进行缓存的。如果依赖没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不会重新执行函数。

方法 vs 计算属性：

虽然计算属性在模板中看起来和方法类似（都是使用 {{ }} 语法），但它们有一个重要的区别：计算属性是基于它们的依赖进行缓存的，而方法则会在每次调用时重新执行。

设置器（Setter）：

计算属性默认只有 getter，但也可以提供一个 setter。当计算属性被赋值时，setter 会被调用。

computed: {fullName: {// getterget() {return this.firstName + ' ' + this.lastName;},// setterset(newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];}}
}

过滤器

Vue过滤器是Vue.js框架中一种用于对数据进行格式化处理的工具

形式

1: 它们可以在双花括号插值,通过管道符“|”来调用
2: v-bind表达式中使用

Vue过滤器分为全局过滤器和局部过滤器两种：

全局过滤器：定义在Vue实例化之前，作用于所有Vue实例。适用于需要在多个组件中复用的过滤器。全局过滤器的定义通常放在Vue实例化之前，使用Vue.filter方法。
局部过滤器：定义在组件内部，只作用于该组件。适用于只在特定组件中使用的过滤器。局部过滤器在组件的filters选项中定义。

<!--过滤器作用 格式化数据--><div id="app"><!--添加过滤器--><input type="text" v-model="msg" /><!--可添加多个过滤器--><!--方法一 插值表达式--><div>{{msg | upper | lower}}</div><!--方法二 属性绑定--><div :a="msg | upper">测试</div></div><script type="text/javascript">//全局过滤器 val是目表元素/* Vue.filters(过滤器名称,function(目标数据,参数){return 结果  })*/// /charAt(index) 返回指定索引的字符Vue.filter('upper', function(val) {return val.charAt(0).toUpperCase() + val.slice(1)})Vue.filter('lower', function(val) {return val.charAt(0).toUpperCase().toLowerCase() + val.slice(1)})var vm = new Vue({el: '#app',data: {msg: ""},methods: {},//局部过滤器filters: {lower: function(val) {return val.charAt(0).toUpperCase().toLowerCase() + val.slice(1)},upper: function(val) {return val.charAt(0).toUpperCase() + val.slice(1)}}})</script>

侦听器

侦听器（Watcher）是Vue.js提供的一种响应式数据监听机制，监听Vue实例上数据属性的变化，并在变化发生时执行特定的逻辑。以下是关于Vue侦听器的详细解释：

在Vue实例或组件中，可以通过watch选项来定义侦听器。watch是一个对象，其键是要监听的数据属性的名称，值是一个函数或带有选项的对象，该函数或对象将在数据属性变化时被调用。

简单函数形式

侦听器可以是一个简单的函数，该函数接收两个参数：新值和旧值。当监听的数据属性变化时，函数会被调用，并传入新值和旧值作为参数。

<div id="app"><div><label>姓</label><input type="text" v-model="firstName" /></div><div><label>名</label><input type="text" v-model="lastName" /></div><!--实时显示姓名--><div>{{fullName}}</div></div><script type="text/javascript">var vm = new Vue({//侦听器观察和相应Vue实例上数据的变化,数据一旦发生变化就通知侦听器绑定的方法//应用场景:数据变化是进行异步或是开销大的操作el: '#app',data: {firstName: '',lastName: '',fullName: '' },watch: {firstName: function(newVal, oldVal) { //newVal 变化后的值 ,oldVal原来的值this.fullName = newVal + this.lastName;console.log('原来的值' + oldVal);},lastName: function(newVal, oldVal) { //val 为fullName变化后的值this.fullName = this.firstName + newVal}},})</script>   

带有选项的对象形式：

侦听器也可以是一个带有选项的对象，这些选项包括handler（回调函数）、deep（深度监听）、immediate（立即执行）等。

deep: true表示深度监听user对象内部属性的变化，immediate: true表示在侦听器初始化时立即执行回调函数。

new Vue({data: {user: {name: 'John',age: 30}},watch: {user: {handler: function(newVal, oldVal) {console.log('user object changed');},deep: true,immediate: true}}
});