web前端全栈0基础到精通（祺）vue 03

最新推荐文章于 2022-07-20 18:34:52 发布

原创最新推荐文章于 2022-07-20 18:34:52 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤器 #vue.js #reactjs #前端

web前端全栈从0基础到精通（祺）vue、react 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中的watch监听器，包括浅监听和深监听的使用。接着讲解了计算属性的概念、get和set方法，以及在购物车实现中的应用。此外，讨论了过滤器的功能，如格式化文本，并展示了如何封装局部和全局过滤器。最后，提到了Vue的过渡动画和常用的animate.css库，以及组件的基本知识。文章还对比了计算属性与methods、计算属性与watch的区别，帮助读者更好地理解Vue的这些核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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

五、组件

面试题

计算属性和methods的区别

两种方式得到的结果是相同的。
不同的是计算属性是基于变量的值进行缓存的，只要在它关联的变量值发生变化时计算属性就会重新执行。而methods没有缓存，所以每次访问都要重新执行。
2、计算属性的特点：
计算属性使数据处理结构清晰；
依赖于数据，如果数据有更新，则计算属性的结果自动更新；
计算属性的结果无须在data中定义就能够在页面中直接使用；
相较于methods，如果依赖的数据不更新，则读取缓存，不会重新计算。

计算属性和watch的区别

共同点：都是以Vue的依赖追踪机制为基础的，都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同点：watch擅长处理的场景：一个数据影响多个数据；computed擅长处理的场景：一个数据受多个数据影响。虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。
总结：
当在模板内使用了复杂逻辑的表达式时，应当使用计算属性。
虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖进行缓存，所以选择计算属性会比方法更优。
当需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。