56 watch（监听/侦听器）、计算属性（computed）、过滤器（filter）、过渡动画（transition）

56 watch（监听/侦听器）、计算属性（computed）、过滤器（filter）、过渡动画（transition）

一、watch（监听/侦听器）

1.1概念

watch 用监听属性的变化。
watch用来监听data的变化

1.2监听方法

1.2.1 浅监听

浅监听可以监听，字符串，普通的数组。它不能监听对象的变化

watch:{
    数据属性(newVal,oldVal){
    
    }
}

 

1.2.2深度监听

可以监听对象的变化

watch:{
    对象数据属性：{
    deep:true,
    handler(newVal){
    
    }
    }
}

---

二、计算属性（computed）

vue的作者：尤雨溪（美籍华人）。他最早在谷歌工作，做angular1.x

vue： 尤雨溪（个人）

angular 谷歌开发的 （新版2.x版本的框架是 谷歌与微软--微软开发了ts--typescript js超集）

angular 1.x 采用的设计模式是MVC

angular 2.x 采用的设计模式就换成MVVM

React 是脸书（Facebook），它并不是框架，它只是一个类库

2.1概念

作者不希望模板内容（这个模板内容指的是{{}}），过于复杂冗余。如果有大量的计算或者逻辑操作，我们可以放在计算属性中。
​
计算属性就是一个函数，最终的结果要通过return返回出去

2.2 计算属性中get和set

每个对象都有get和set。一般情况下，我们只是取值，取值的过程中，你是省略了get的步骤。但凡你要从外部修改这个数据，你会触发set方法
​
get() 这个方法我们也称之为，取值器 getter
set() 这个方法我们也称之为，赋值器 setter
​
一般我们都不去调用get()或者set(){}，而是直接通过简写方式去获取返回值即可

2.3 实战案例之购物车

实现购物车有两种方式：
一、必须要登录才能看见购物车列表，比如:淘宝。。。
二、不需要登录就可以看见购物车列表，比如京东的移动端
​
针对于前端，实现上述两种方案最简单的是，必须要登录的

---

三、过滤器（filter）

3.1概念

针对于文本进行格式化（当前文本指的是{{}}）
​
返回的内容是跟你的过滤的条件。
​
有时候后端返回的数据，并不适用于直接渲染，我们要针对数据进行2次修改。
比如后端返回的时间格式：时间戳 1617868610333
用户应该看到的格式： 2021/04/08 或者 2021-04-08
​
封装好的过滤器如何调用。通过过滤符 ‘|’

3.2 过滤器的封装方式

3.2.1 局部过滤器

filters:{
    过滤器名称(参数一，参数二){
        //参数一 你要过滤的内容
        //参数二 调用当前过滤器传入的参数
        return 返回过滤结果
    }
}

 

3.2.2 全局过滤器（常用！！！）

Vue.filter('过滤器名称',(参数一，参数二)=>{
//过滤器逻辑
//参数一 你要过滤的内容
        //参数二 调用当前过滤器传入的参数
        return 返回过滤结果
})

---

四、过渡动画（transition）

4.1内置过渡动画

两大种状态（6小种状态）
​
离开（leave）
leave 离开之前
leave-active 离开的过程中
leave-to 离开之后
​
进来(enter)
enter 进入之前
enter-active 进来的过程中
enter-to 进入之后
​
​
内置的方法很麻烦，还是要结合你自己的css 样式

4.2 动画库

animate.css 动画库

• 官网地址

https://animate.style/

• 下载方式

npm install animate.css
+ animate.css@4.1.1