2024年最全Vue(17)，web前端技术面试题

总结

三套“算法宝典”

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

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

data: exampleData

});

2、Vue的双向绑定

---

在Vue.js中，ViewModel、View以及Model进行交互的方式，如下图所示

在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定

示例:

html代码：

{{ message }}

JavaScript代码：

// 这是Model

var exampleData = {

message: “Hello World!”

};

// 创建一个Vue实例

var vm=new Vue({

el: ‘#app’,

data: exampleData

});

v-model双向绑定

当更改文本框的值时，

{{ message }}

中的内容也会被更新

3、实践练习

---

三、Vue生命周期

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

1、Vue的实例和数据

---

Vue应用的创建很简单，语法如下面代码所示

语法:

var vm=new Vue({

// 选项参数

});

通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用

常用的选项参数包含如下：

| 选项参数 | 说明 |

| :-: | :-- |

| el | 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标 |

| data | Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化 |

| methods | Vue实例的方法集合，可以在Vue直接调用或将方法绑定到DOM元素的事件上 |

| computed | Vue实例的计算属性集合 |

| watch | 观察Vue实例变化的一个表达式或计算属性函数 |

| components | 包含Vue实例可用组件的哈希表 |

| filters | 包含Vue实例可用过滤器的哈希表 |

| template | 定义字符串模板作为Vue实例的标识使用 |

示例： 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。

也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中，难以维护

HTML代码:

当挂载成功后，就可以通过vm.$el来访问该元素

JavaScriput 代码:

var vm=new Vue({

el:document.getElementById(“app”) // 或者是#app

});

示例： 通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。也可以将所有会用到的数据都预先在data内声明，这样不至于将数据散落在业务逻辑中

HTML代码:

所有会用到的数据预先在data内声明

JavaScript代码:

var vm=new Vue({

el:“#app”,

data:{

title:“”,

user:{

name:“”,

age:0

}

}

});

示例：

在Vue实例内部访问data中的数据时一般使用“this.数据”的方式，如果在Vue实例外部访问data中的数据时，使用Vue实例对象来访问

JavaScript代码:

var vm=new Vue({

//…data代码同上例

methods:{

doSave:function(){

console.log(“姓名：”,this.user.name)

}

}

});

var vm=new Vue({

//…data代码同上例

});

// 在Vue实例外部访问data中的数据

console.log(vm.user.name);

在实例外部，使用实例对象的方式访问

2、Vue生命周期钩子函数

---

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染、更新、渲染到销毁等一系列过程，称为Vue的生命周期。

通俗说Vue实例从创建到销毁的过程，就是它的生命周期。

每个Vue实例创建时，都会经历一些系列的初始化过程，同时也会调用相应的生命周期函数，这些生命周期函数称为“钩子函数”

开发者可以利用这些钩子函数，在合适的时机执行相关业务逻辑代码。在Vue实例的生命周期，钩子比较常用的函数有：

• created()函数：实例建立完成后调用

• mounted()函数：el挂载到实例上后调用

• beforeDestroy()函数：实例销毁之前调用

示例： 下面示例中,在created()钩子函数中对模型加载数据，而在mounted()函数中读取el绑定的元素的信息。

HTML代码:

{{ title }}

JavaScript代码:

…

created:function() {

this.title=“生命周期钩子函数”;

console.log(“created()钩子函数执行…”);

}

…

…

mounted:function() {

console.log(this.$el);

console.log(“模型title的值:”,this.title);

console.log(“mounted()钩子函数执行…”);

}

…

3、实践练习

---

四、过滤器

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

1、过滤器使用

---

Vue.js支持在{{}}的插值的尾部添加一个管道符（“|”）对数据进行过滤

创建过滤器有两种方式：

• 全局创建过滤器

• 局部创建过滤器

语法:

//创建全局过滤器

Vue.filter(“过滤器名”,function(val){

过滤语句

});

//创建局部过滤器

var vm = new Vue({

el: “#app”,

filters:{

过滤器名:function(val){

过滤语句

}

}

});

{{ 模型数据 | 过滤器 }}

总结

三套“算法宝典”

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

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注