Vue：常用钩子

组件中使用数据的几种方式：

① 双括号表达式{{}}——直接获取数据

② 强制数据绑定v-bind:或者:——将数据绑定在标签上，比如于a标签href等

③ 强制事件绑定v-on:click或者@click——将方法绑定在标签上

• methods：声明所有的方法函数

methods:{

study(name){

// name如果没有接收到值的话，默认是一个事件对象。类型为object

alert(${typeof name==="string"?name:""}祝你学有所成)

}

}

• computed：定义计算属性.

Ⅰ、作用：

① 减少模板中的计算逻辑

② 进行数据缓存

③ 依赖固定的数据类型（响应式数据）

Ⅱ、使用：

① 在computed属性对象中定义计算属性的方法

② 在页面中使用{{方法名}}来显示计算的结果

③ 通过getter和setter实现对属性数据的显示和监视

Ⅲ、get()和set()

① 通过get()可以返回计算属性的值

② 通过set(value)可以触发修改计算属性时事件，其中value为更改后的计算属性的值。

computed: { // 配置计算属性

// 计算属性 姓名

fullNameOne: { // 单向

get() {

return this.firstName + ‘·’ + this.lastName;

}

},

fullNameTwo: { // 双向

get() {

return this.firstName + ‘·’ + this.lastName;

},

set(value) {

let name = value.split(‘·’);

this.firstName = name[0];

this.lastName = name[1];

}

}

}

• watch：侦听器

Ⅰ、作用：

① 比computed更加灵活

② watch中可以执行任何逻辑，比如：函数节流、Ajax异步获取、甚至操作DOM

③ 依赖固定的数据类型（响应式数据）

Ⅱ、使用：

① 通过vm对象的$watch()或者watch配置来监视指定的属性

② 当属性变化时，回调函数自动调用，在函数内部进行计算

watch: {// 配置监听watch

// 监听firstName

firstName(value) {

//console.log(watch监视到firstName发生改变：${value});

this.fullNameThree = value + ‘·’ + this.lastName;

},

lastName(value) {

//console.log(watch监视到lastName发生改变：${value});

this.fullNameThree = this.firstName + ‘·’ + value;

}

}

computed和watch总结

1. computed能做的，watch都能做，反之则不行

2. 能用computed的地方，尽可能使用computed

3. computed是计算一个新的属性，并将该属性挂载到vm(Vue实例)上，而watch是监听已经存在并且已经挂载到vm上的数据，所以用watch同样可以监听computed计算属性的变化（其他还有data、props）

4. computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖发生变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数

5. 从使用场景上说，computed适用于一个数据被多个数据影响，而watch适用于一个数据影响多个数据

• directives：自定义局部指令

vue自定义指令

• filters：自定义局部过滤器

vue自定义局部过滤器

• beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

在创建初始化之前进行的操作，在整个组件尚未初始化的时候进行的操作。这是第一个生命周期函数；组件的data和methods以及页面DOM结构，都还没有初始化；所以在这个阶段阶段，什么都做不了。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

前端面试题汇总

---

前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：

由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

g.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)

由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以【点击我】阅读下载哦~无偿分享给大家

感悟

春招面试的后期，运气和实力都很重要，自己也是运气比较好，为了回馈粉丝朋友们（毕竟自己也玩了这么久哈哈哈），整理个人感悟和总结以上。最后祝愿大家能够收获理想offer！！