Vue3+TS Day05 - 基础指令 深拷贝、浅拷贝、v-m
2021-11-29 本文已影响0人
望穿秋水小作坊
一、深拷贝、浅拷贝
1、什么是对象的引用赋值？
-
js 中对象都是引用类型的
image.png
image.png
2、什么是浅拷贝？
-
Object.assign({}, this.person);就是浅拷贝，只进行第一层的拷贝 - 如果下图中的 person 里面有个 friend 对象，friend 对象不会被拷贝
image.png
image.png
3、什么是深拷贝？
image.png
- 这种拷贝不能拷贝
undefined、function、rRegExp等数据 - 推荐使用
loadash 库
二、v-model
1、v-model 的基本使用场景？
- 大多用于与用户交互的表单场景
image.png
2、如果没有 v-model，我们如何保持 text 和 input 里面的 message 响应式呢？
- 通过下面的代码，我们更能深刻理解到为什么 v-model 会被称为双向绑定。
<body>
<div id="app">
</div>
<template id="my-app">
<input type="text" :value="message" @input="inputChange" ></input>
<label>{{message}}</label>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template: '#my-app',
data: function() {
return {
message: "Hello World",
}
},
// 定义各种各样的方法
methods: {
inputChange(event) {
this.message = event.target.value;
}
}
}).mount('#app');
</script>
</body>
3、v-model 通过上面的例子，我们知道了本质是什么？
- v-model 的本质，就是上面【问题2】手写代码的【语法糖】
-
换句话说 v-model 是 【v-bind 和 v-on 的语法糖】
image.png
4、v-model 和其他 html 标签的绑定效果（用到了再来查询吧）？
image.png
image.png
image.png
image.png
image.png
5、v-model 还可以跟一些修饰符（用到了再来查询吧）？
image.png
image.png
image.png
6、v-model 的源码解读（目前了解即可，比较复杂）？
image.png
三、组件开篇
1、人处理信息的逻辑能力是有限的，那么遇到超级大问题会怎么办呢？
- 会把一个大问题拆解成多个小问题
- 把小问题都解决了，大问题也就迎刃而解了
image.png
2、组件化开发的核心思想？
image.png
3、组件化开发在大前端的地位？
image.png
4、怎么理解 vue 中的组件？
- 前面我们的 createApp 函数传入了一个
对象 App，这个对象其实本质上就是一个组件，也是我们应用程序的根组件
image.png
四、vue 的组件化
1、什么是全局组件？如何注册一个全局组件？
- 全局组件：意味着注册的这个组件可以在任何组件模板中使用
image.png
image.png
2、注册组件的两种方式？
image.png
3、组件的两种命名规范（了解）？
image.png
4、【全局组件】的优缺点？局部组件的优缺点？
image.png
5、如何注册局部组件？
image.png
四、构建工具
1、为什么需要有构建工具？
- 在 vue 开发中，我们通常会把模板抽离到
一个 .vue 的文件中 - 但是浏览器不认识也不能解析 .vue 文件，那么怎么办？这就需要
构建工具来解析了 - 常见的构建工具有 【webpack】【vite】
2、什么是 SFC？SFC 的优点（随便说 2 个）？
image.png
image.png
3、如何支持 SFC？
image.png
