Vue 计算属性和监视属性详解细节 class类绑定和style样式绑定 (四)

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

注意：

只要Vue中的data值，发生改变它就要重新解析模板。

2.Vue 计算属性 （推荐使用）

==============================================================================

2.1 计算属性 computed get函数

---

在Vue中，属性就是data中的数据。

而计算属性呢，则是在computed中。compute也是在Vue实例查到，因此我们可以直接使用差值语法来嗲用fullName就行了。

案例：

姓：

名：

姓名： {{fullName}}

上面因为缓存内容就会考虑什么时候调用get，get什么时候调用？

**1. 初次读取fullName时，get会被调用。（这里涉及了页面缓存的问题。）

2. 所依赖的数据发生变化时，也就是data的内容发生变化，自然会重新调用computed中的函数。。**

这里关于fullName中的get有一个误区一定注意：

2.2 计算属性 computed set函数

---

有get，就会有set方法，什么时候会用到set？

当computed中的属性被修改时，就要用到set。

案例：

姓：

名：

姓名： {{fullName}}

注意：被Vue管理的函数,不要用箭头函数，会改变this。

总结：

2.3 getter的简写（前提不考虑修改，配置setter时）

---

3. Vue 监视属性

=========================================================================

3.1 注意事项

---

首先，介绍一个插件：

Vue开发者工具存在一个问题，就是如果没有牵动改变页面方面的内容，开发者工具中的root里面的data值一般不会变化，实际上是变化了。

源码：

今天天气很{{info}}

<button @click=“chengeWeather”>切换天气

对于上面这种我们还可以更加简化一些，我们直接在@click中写判断式也是可以的，如下：

<button @click=“isHot = !isHot”>切换天气

也就是说div模板里面的东西是可以直接调用Vue实例对象中的内容。如果有两个以上的语句是可以通过" ；"来分割的。不过不推荐，还是在methods对象中定义比较好。

源码：

今天天气很{{info}}

<button @click=“isHot = !isHot”>切换天气

如果我们像用Vue实例对象中没有的事件，例如alert，我们可以在data中导入：

当然，像这种在事件(@xxx = “yyy”)内写的方式不推荐，只是适合比较简单的内容，内容多了就非常冗余。

3.2 监视属性

---

3.2.1 监视属性watch 写法一

引入新的对象，watch就是用来监视的。

hander()函数： 当被监视的对象发生改变时，它就会被调用。

hander(newValue,oldValue)函数有两个参数，分别是修改前和修改后的值。

与hander对象函数对应的有immediate对象属性，作用就是初始化时，让handler调用一下。

源码：

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

3.2.2 监视属性watch 写法二

这里提醒一下，曾经我们对象和值的写法是这样子的，’ key ’ : ’ value ',后来呢只不过默认可以写成了key : ’ value ’ ，这里记一下要。

我们可以使用$watch()来在Vue实例对象外面，来定义监听。

源码：

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

对于这两种写法，第二种写法比较适合在不确定监测哪一个属性时适用，第一种写法比较适合已经确定好了监听那一个属性。

3.3 深度监视属性

---

因为在对象中键值的key，必须是字符串形式，所以可以写成’ key.xxx ‘:’ value '的样式。

专业术语上是：监视多级结构中某个属性的变化，用下面的样式。

源码：

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

---

a的值是：{{numbers.a}}

<button @click=“numbers.a++”>点我让a加1

当然，如果有上百个需要监视的对象属性，怎么办？

首先，就是我们不能直接监视numbers本省。因为我们的目标是监视numbers里面的内容，再次就是会发生下图的情况，就算numbers中的a、b发生变化，numbers中的handler也不会执行。

如何解决，这里我们可以配置deep:true来解决。

源码：

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

a的值是：{{numbers.a}}

<button @click=“numbers.a++”>点我让a加1

b的值是：{{numbers.b}}

<button @click=“numbers.b++”>点我让b加1

总结：

3.5 监视的简写形式

---

在没有immediate，deep等其他的对象属性，只有handler时可以直接简写形式。

源码：

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

a的值是：{{numbers.a}}

<button @click=“numbers.a++”>点我让a加1

b的值是：{{numbers.b}}

<button @click=“numbers.b++”>点我让b加1

同样,$watch也是可以简写的，但不能有其他配置对象属性，只能有handler()函数。

4. watch和computed比较

=================================================================================

其实，watch和computed区别并不是很大，都能够实现，但computed因为必须有return返回值这一说，所以实现起来，会有一定阻碍。

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）