1.补充
- 当时用deep进行监听的时候,旧值和新值指向的存储地址是一样的,所以他的内容是相同的(补充);
- 引用赋值不会被深拷贝;
- 监听数组对象中的属性的时候,可以使用 deep 进行监听;
- 另外一种方式
// 数组
friends : [ {name:"why"} , {name:"kobe"} ]
// 监听数组
// 首先创建一个BaseFriend组件
// 分别将 name属性传递给组件,然后监听 prop对象中的数据
2.知识补充:对象的引用、浅拷贝和深拷贝
- 对象的引用赋值
- 对象的引用类型,在c++中引用叫做指针,Js中是引用;
- const info = { name: ‘why’, age: 18 } 在内存中的表现;
- 一个存储变量info,另外一个存储内容**{ name: ‘why’, age: 18}, 存储变量的内存中存储的是 存储内容的地址**;
- const obj = info 在内存中的表现;
- 新开辟一块内存,存储 obj, 找到 info 指向的存储地址,然后给obj,此时,obj和info指向相同的内存地址;
- 浅拷贝
const info = { name: 'why', age: 18 }
const obj = Object.assign({},info);
- 将 info对象 通过 assign 方法拷贝一份,然后返回给obj变量;
- 内存中的表现:
- 第一句 内存中有一个info ----> { name:‘why’ , age: 18 } 指向 内容;
- 第二句 重新创建一个新对象,然后,将上面的对象拷贝一份,放到自己的地址中,然后将返回值赋值给obj;
- obj指向的是新创建的对象;
- 给info对象中添加一个属性 friend: { name: ‘james’ , height: 1.98};
- 在进行拷贝,然后返回给obj的时候,其中obj的friend 也是一个引用,与info的friend指向的是相同的地址,所以当 info.friend.name = ‘han’ 进行重新赋值的时候,console.log(obj.friend.name) 也应该输出的为 han。
- 深拷贝
const info = { name: 'why', age: 18, friend: { name: 'han', age: 18 } }
const obj = JSON.parse(JSON.stringify(info)); // 深拷贝的一个方式
// 另外一个方式是可以借助于 第三方库loadash
_.cloneDeep(info)
2.知识补充:逻辑判断中的隐式转化
- 逻辑判断时候,会自动将一个字符串(string)转化为一个number类型来进行判断(number):隐式转化;
- 可以进行转化的情况下,可以转化成为number类型;
3.Vue3的表单和开发模式
3.1 v-model的基本使用
- 表单提交是开发中非常常见的功能,也是和用户交互的重要手段:
- 登陆、注册时需要提交账号和密码;
- 检索、创建、更新信息时候,需要提交的一些数据;
- 这些要求我们可以在代码逻辑中获取到用户提交的数据,通常使用v-model来完成;
- v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定;
- 它会根据控件类型自动选取正确的方法来更新元素;
- v-model本质上是语法糖,负责监听用户的输入事件来更新数据;
3.2 v-model的原理
- v-bind 绑定 value属性的值;
- v-on 绑定input事件监听到函数中,函数会获取最新的值赋值到绑定的属性中;
- 事实上v-model更加复杂;
3.3 v-model的值绑定
- 目前我们在前面的案例中大部分的值都是在template中固定好的;
- 在真实开发中,我们的数据可能来自服务器,先请求下来,绑定到data返回的对象中,再通过v-bind来进行值的绑定,这个过程就叫做值绑定;
3.4 v-model修饰符
- lazy修饰符
- 默认绑定 @input 事件,如果输入就会触发;
- 改变为敲回车的时候在触发,使用 v-model.lazy,input事件切换为change事件;
- number修饰符
- typeof 查看类型;
- 默认情况下,v-model把输入value绑定到属性的时候,永远赋值的是string类型;
- 如果我们要输入的变为number的时候,添加number ,v-model.number;
- 永远拿到前面可以转化的(例如:1111aaa 只取 1111)
- trim修饰符
- 去除两边的空格;
- 如果要自动过滤用户输入的首尾空白字符,可以给v-model添加trim修饰符;
4.人处理问题的方式(引出组件化开发)
- 人面对复杂问题的处理方式:
- 任何一个人处理信息的逻辑能力都是有限的;
- 当面对一个非常复杂的问题的时候,不太可能一次性搞定一大堆的内容;
- 问题进行拆分;
- 拆分成多个可以处理的小问题,在将其放在整体中,问题会迎刃而解;
4.1 认识组件化开发
- 组件化也是类似思想:
- 将一个页面中所有的处理逻辑全部放在一起,会非常复杂,不利于后期的管理以及扩展;
- 将一个页面拆分成一个个小的功能模块,每个功能块完成自己这部分的功能,利于管理和维护;
- 搭建积木一样搭建我们的项目;
4.2 组件化开发
- 现在可以说整个的大前端开发都是组件化的天下;
- 三大框架(Vue、React、Angular),跨平台方案的Flutter,设置是移动端都在转向组件化开发,包括小程序的开发也是采用组件化开发的思想;
- 学习组件化最重要的是它的思想;
- 通过组件化的思想考虑整个应用程序:
- 完整页面拆分很多组件;
- 每个组件都用于实现页面的一个功能块;
- 而每一个组件又可以进行细分;
- 组件本身又可以在多个地方进行复用;
4.3 Vue的组件化
- createApp函数传入了一个对象App,这个App其实就是一个组件,也是我们应用程序的跟组件;
- 组件化提供了一种抽象,让我们可以开发一个个独立可复用的小组件来构造我们的应用;
- 任何的应用都会被抽象成一棵组件树;
4.4 注册全局组件的方式
- 把一部分内容(模板、逻辑等)抽取到一个独立的组件中去维护;
- 全局组件:意味着注册的这个组件可以在任何的组件模板中使用;
<template id="my-app">
<component-a></component-a>
</template>
const app = Vue.createApp(App);
// 使用app 注册一个组件(全局组件)
// app.component(组件名称,组件对象)
app.component("component-a", {
template: "#component-a"
})
- 注册组件分成两种:
- 全局组件:在任何其他的组件中都可以使用的组件;
- 局部组件:只有在注册的组件中才能使用的组件;
4.5 全局组件的逻辑
- 组件本身也可以有自己的代码逻辑:data、computed、methods等
4.6 组件的名称
- 在通过app.component注册一个组件的时候,第一个参数是组件的名称,定义组件名称的方式有两种:
- 方式一:使用kebab-case(短横线分隔符) component-a
- 方式二:使用PascalCase(驼峰标识符) ComponentName (允许使用分隔符使用:component-name)
- 一般使用的是方式一;
4.7 注册局部组件
- 注册的全局组件,如果有的没有被使用,但是依然在全局进行了注册,意味着类似于webpack这种打包工具在打包我们的项目时候,我们依然会对其进行打包;
- 这样用户在下载对应的JavaScript时会增加包的大小;
- 在开发中我们通常使用组件的时候采用的都是局部注册;
- 局部注册是我们需要使用的组件,通过components属性选项来进行注册;
- components选项对应的是一个对象,对象中的键值对是组件名称:组件对象;
5.Vue3的开发模式
- 目前使用:在html文件中,通过template编写自己的模板、脚本逻辑、样式等;
- 随着项目越来越复杂,会采用组件化开发的方式来进行开发:
- 意味着每个组件有自己的模板、脚本逻辑、样式等;
- 我们依然可以把它们抽离到单独的js、css文件中,但是它们还是会分离开来;
- 也包括我们的script是在一个全局的作用域下,很容易出现命名冲突的问题;
- 代码为了适配一些浏览器,必须使用ES5的语法;
- 编写完代码之后,依然需要通过工具对代码进行构建;
- 在真实开发中,我们可以通过一个后缀名为.vue的SFC
single-file components(单文件组件)
来解决,并且可以使用webpack或者vite或者rollup等构建工具来对其进行处理;
5.1 单文件的特点
- 代码的高亮;
- ES6CommonJS的模块化能力;
- 组件作用域的CSS;
- 可以使用预处理器来构建更加丰富的组件,比如TypeScript、Babel、Less、Sass等;
5.2 如何支持SFC
- 常见的两种方式:
- 方式一:使用Vue CLI来创建项目,项目会默认帮助我们配置好所有的配置选项,可以在其中直接使用.vue文件;
- 方式二:自己使用webpack或者rollup或vite这类打包工具,对其进行打包处理;
- 通常采用Vue CLI的方式完成;
6.webpack使用前提
- webpack依赖node环境;