2024年前端最全上手Vue：深度理解computed、watch及其区别，腾讯面试几面

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

}

},

})

只考虑读取，没有修改时，计算属性可以简写

结果如下：

2. watch（侦听器）简介

2.1 使用场景：

侦听属性是观察和响应 Vue 实例上的数据变动

2.2 使用方式：

通过 Vue实例对象的$watch()或 watch 配置来监视指定的属性，当属性变化时, 回调函数自动调用, 在函数内部进行计算

2.3 小案例：

点击按钮，切换天气，页面展示：今天天气很炎热或凉爽

案例代码如下所示：当isHot发生变化时，就打印到控制台

今天天气很{{info}}

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

实现监视的另一种实现方法：vm为Vue的一个实例对象

// 监视的另一种实现方法

vm.$watch(‘isHot’, {

immediate: true,

//当isHot发生改变时，回调函数handler被调用

handler(newValue, oldValue) {

console.log(‘isHot被修改了’, newValue, oldValue)

}

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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

分享给小伙伴们，有没有需要的小伙伴们都去领取！

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