以下面试题不分先后顺序
1、vue实现双向数据绑定原理是什么?
“我自己是一名从事了6年web前端开发的老程序员,今年年初我花了一个月整理了一份最适合2022年自学的web前端全套培训教程(视频+源码+笔记+项目实战),从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理,打包给每一位前端小伙伴,这里是前端学习者聚集地,欢迎初学和进阶中的小伙伴(所有前端教程关注我的微信公众号:web前端学习圈,关注后回复“web”即可领取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!-- 引入vue文件 -->
<div id="box">
<new-input v-bind:name.sync="name"></new-input>
{
{name}}
<!-- 小胡子语法 -->
<input type="text" v-model="name" />
</div>
<script>
Vue.component("new-input", {
props: ["name"],
data: function () {
return {
newName: this.name,
};
},
template: `<label><input type="text" @keyup="changgeName"
v-model="newName" /> 你的名字:</label>`,
// 模板字符串
methods: {
changgeName: function () {
this.$emit("update:name", this.newName);
},
},
watch: {
name: function (v) {
this.newName = v;
},
},
// 监听
});
new Vue({
el: "#box",
//挂载实例
data: {
name: "nick",
},
//赋初始值
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" v-mode="msg" />
<p v-mode="msg"></p>
<script>
const data = {
msg: "你好",
};
const input = document.querySelector("input");
const p = document.querySelector("p");
input.value = data.msg;
p.innerHTML = data.msg;
//视图变数据跟着变
input.addEventListener("input", function () {
data.msg = input.value;
});
//数据变视图变
let temp = data.msg;
Object.defineProperty(data, "msg", {
get() {
return temp;
},
set(value) {
temp = value;
//视图修改
input.value = temp;
p.innerHTML = temp;
},
});
data.msg = "小李";
</script>
</body>
</html>
八股文我不想写了自己百度去
2、v-model语法糖是怎么实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-model 只是语法糖而已 -->
<!-- v-model 在内部为不同的输入元素使用不同的property并抛出不同的事件 -->
<!-- text和textarea 元素使用value property 和 input事件 -->
<!-- checkbox 和radio使用checked property 和 change事件-->
<!-- select 字段将value 作为prop 并将change 作为事件 -->
<!-- 注意:对于需要使用输入法(如中文、日文、韩文等)的语言,你将会发现v-model不会再输入法
组合文字过程中得到更新 -->
<!-- 再普通标签上 -->
<input v-model="sth" /> //这一行等于下一行
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
<!-- 再组件上 -->
<currency-input v-model="price"></currentcy-input>
<!--上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->
<!-- 子组件定义 -->
Vue.component('currency-input', {
template: `
<span>
<input
ref="input"
:value="value"
@input="$emit('input', $event.target.value)"
>
</span>
`,
props: ['value'],
})
</body>
</html>
3、Hash和history有什么区别
戳右面的链接:juejin.cn/post/699384…
4、什么是深拷贝和浅拷贝?以及怎么实现深拷贝和浅拷贝?
戳右面的链接: juejin.cn/post/684490…
5、什么是原型什么是原型链?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
function Person () {
}
var person = new Person();
person.name = 'Kevin';
console.log(person.name) // Kevin
// prototype
function Person () {
}
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name)// Kevin
console.log(person2.name)// Kevin
// __proto__
function Person () {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype) // true
//constructor
function Person() {
}
console.log(Person === Person.prototype.constructor) // true
//综上所述
function Person () {
}
var person = new Person()
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
//顺便学习一下ES5得方法,可以获得对象得原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
//实例与原型
function Person () {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
del