2024年Web前端最全Vue的计算属性与methods、watch的区别，2024年最新面试官打压面试者

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

---

有时候我们可能需要在{{}}里进行一些计算在展示出来数据

如商品价格、总价，学生成绩、总分等。

如：

ID 数量 价钱 操作 {{item.id}} 价钱:{{item .num*item.money}}

<a class=“del” @click.prevent=“del(item.id)”>删除

总价：{{totalMoney}}

. new Vue({

el:‘#mytable’,

List:[

{id:1,money:2,num:2},

{id:2,money:3,num:2},

{id:3,money:4,num:2},

] })

虽然在methods中也能得出总价,但事实上，vue给我们提供了一个特别好的解决方案叫：计算属性

计算属性是vue实例中的一个配置选项：computed

通常里面都是一个个计算相关的函数，返回最后计算出来的值。

即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

computed:{ //计算属性

totalMoney:function () {

let result =0

this.List.filter(item=>{

result+=item.money*item.num

})

return result

}

当调用多个同样的方法时再看一个示例:

{{one}}{{two}}

{{getAll()}}

{{getAll()}}

{{getAll()}}

{{getAll()}}

{{All}}

{{All}}

{{All}}

{{All}}

name:“About”,

data(){

return{

one:“我是第一个”,

two:“我是第二个”

}

},

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

ue：组件之间的通信（props，callback，emit）

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

[外链图片转存中…(img-Yfo1RtfK-1715384098540)]

[外链图片转存中…(img-lhV27lzp-1715384098541)]