VUE常见面试题

溪ｉ

已于 2022-10-26 22:11:56 修改

阅读量183

点赞数

分类专栏： VUE3 文章标签： 1024程序员节

于 2022-10-24 20:40:16 首次发布

本文链接：https://blog.csdn.net/weixin_44891495/article/details/127485155

版权

VUE3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨Vue中data为何是函数，强调作用域和构造函数的概念。通过实例解释构造函数在对象创建中的优势，指出Vue组件间数据隔离的重要性，对比Vue与jQuery操作DOM的差异，并解析v-for与v-if的使用策略。同时，文章总结了面试中遇到的相关问题。

摘要由CSDN通过智能技术生成

VUE常见面试题

道阻且长，行而不辍，未来可期

vue的data和method为什么是函数?

答：
函数拥有自己的作用域，
vue中的组件是用来复用的，将date写成一个函数，等于给每个组件实例创建一个私有的数据空间
让各个组件实例维护各自的数据。
如果组件中的data写成对象形式，所有的组件实例共用一个data,会造成一个组件数据变了，其他组件数据跟着变。

什么是作用域？
作用域就是一个独立的地盘，让变量不会外泄、暴露出去
作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突

什么是代码块？
代码块就是{}
代码块的作用？
代码块其实就是作用域。在这个作用域中有自己的变量可以定义，
别的地方是访问不到的
注意：
JS只有函数作用域，没有块级作用域
代码块这个概念是跟let一起的，只有let定义的变量才会在代码块中生效
什么是构造函数？
在JavaScript中，用new关键字来调用的函数，称为构造函数。
构造函数的首字母一般大写。

构造函数和普通函数的区别就是调用方式不一样
普通函数是直接调用，而构造函数需要使用new关键字来调用

为什么要用构造函数？
使用构造函数可以实现代码的复用
例如：我们要录入一些三年级二班中同学的信息
我们可以创建一些对象

var person1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var person2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var person3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var person4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

由此可见，重复写了很多无意义的代码。
比如 name、age、gender、hobby 。
如果这个班上有60个学生，我们得重复写60遍。

此时，构造函数的优势就体现出来了，
每位同学都有name,age,gender,hobby这些属性,但是他们不同
我们就可以把这些属性当作构造函数的参数传递进去。

function Person(name, age, gender, hobby) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.hobby = hobby;
}

当创建好上面的函数后，就可以通过new关键字调用，也就是通过构造函数来创建对象

var pe1 = new Person('zs', 6, '男', 'basketball');
var pe2 = new Person('ls', 6, '女', 'dancing');
var pe3 = new Person('ww', 7, '女', 'singing');
var pe4 = new Person('zl', 6, '男', 'football');

总结：
在使用对象字面量创建一系列同一类型的对象时，
这些对象可能具有一些相似的特征(属性)和行为(方法)，
此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

构造函数的执行过程：
当一个函数创建好以后，我们并不知道它是构造函数，
即使函数名用大写，我们也不能确定。
只有当一个函数以new关键字来调用的时候，我们才能说它是一个构造函数

function Animal(food) {
  this.food = food;
}

像下面这样

const dog = new Animal("肉");
const cat = new Animal("鱼");

构造函数的执行过程：

当以new关键字调用时，会创建一个新的内存空间，标记为Animal的实例对象
函数体内部的this指向该内存。
创建dog时,函数体内的this指向dog
创建cat时,函数体内的this指向cat
函数体内的代码
通过上面的讲解，可知。给this添加属性,就相当于给实例对象添加属性
默认返回this
由于函数体内部的this指向新创建的内存空间，默认返回this,
就相当于返回了该内存空间,也就是#dog。
此时,#dog的内存空间被变量dog多结束。
也就是说dog这个变量，保存的内存地址就是#dog,
dog这个变量同时被标记为Animal的实例对象

构造函数的返回值
构造函数执行过程的最后一步默认返回this。
言外之意，构造函数的返回值还有其他情况

1.构造函数，默认返回this

function School() {
  this.name = "实验中学"
}
const s = new School();
console.log(s);//School { name: '实验中学' }

2.手动添加一个基本类型的返回值，默认返回还是this

function Address() {
  this.address = "榆水巷";

  return "渝北";
}
const ad = new Address();
console.log(ad);//Address { address: '榆水巷' }

3.手动添加一个复杂类型的返回值，会返回复杂类型的数据

function Home() {
  this.address = "榆水巷";

  return {
    address: '猫耳朵胡同',
    father: 'aa',
    mather: 'cc'
  }
}
const h = new Home();
console.log(h);//{ address: '猫耳朵胡同', father: 'aa', mather: 'cc' }

不使用new关键字，直接运行构造函数，是否会出错？
如果不会出错，那么用new关键字和不要new关键字调用构造函数，有什么区别？

使用new调用构造函数，函数内部会发生如下变化：

创建一个this变量,该变量指向一个空的对象，并且该对象指向继承函数的原型
属性和方法会加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象）

从上面的例子中可以看出，使用new构造函数，最大的特点是
this指向构造函数生成的对象。如果手动指定了返回对象，this会丢失

直接调用函数，this指向window,并且默认返回undefined

代码分析：
vue每次会通过组件创建出一个构造函数，每个实例都是通过构造函数new出来的
假设data是一个对象，将这个对象放到原型上去

function VueComponent() { }

VueComponent.prototype.person = {
  name: '鹿林溪',
  age: 19
}

let p1 = new VueComponent();
p1.person.name = "锦城";//p1对象将原型上的person.name修改为 锦城
let p2 = new VueComponent();
console.log(p2.person.name);//锦城

输出 p2.person.name 锦城，由此可以发现data相互影响
将data改为一个函数


VueComponent.prototype.data = () => {
  return {
    school: 'aa',
    address: '榆水巷'
  }
}


p1.data().address = "渝北";

console.log(p2.data().address);//榆水巷

由此可见，data是一个函数，可以保证每个实例对象调用data时都返回一个全新的对象，和外部没有关系

vue中的组件是用来复用的
so,vue组件中的data数据应该是相互隔离，互不影响的。
组件每复用一次，data数据就应该被复制一次，
之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的 data数据不受影响
so,data应该被定义成一个函数，数据以返回值形式定义，这样每复用一次组件，
就会返回一份新的data。因为函数有自己的作用域，类似于给每个组件实例创建一个私有的数据空间
让各个组件实例维护各自的数据。
如果组件的data写成一个对象，那么所有的组件实例共用一个data,会造成一个组件数据变了，其他组件数据跟着变。

Vue 和 JQuery的区别