05.Vue组件化开发(初识)、表单 &对象引用、深拷贝和浅拷贝(Tip)

coderHan_

已于 2022-10-27 09:49:23 修改

阅读量351

点赞数 1

分类专栏： vue3.js 文章标签： javascript 前端 vue.js

于 2022-10-10 17:59:46 首次发布

本文链接：https://blog.csdn.net/HGJyujian/article/details/127239753

版权

vue3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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的语法；
编写完代码之后，依然需要通过工具对代码进行构建；