vue3组件化开发（一）

上节课的补充&＃xff1a; watch案例

1、如果监听对象或者数组的某一项东西&＃xff0c;他在发生改变时&＃xff0c;新旧值是同一个值&＃xff0c;vue3文档中有说明

因为引用赋值所以新旧值相同&＃xff0c;引用的是一个地址里面的同一个值&＃xff0c;旧的值已经被改变了

 2、数组如何监听

另一种监听&＃xff1a;一般数组用来遍历展示内容&＃xff0c;所以一般应该在子组件监听props 对象的属性

 3、关于对象的引用&＃xff0c;浅拷贝和深拷贝

3.1、对象的引用赋值3

var info &＃61; {
name:"why"
};
var obj &＃61; info;
obj.name &＃61; "kobe";
console.log(info.name&＃61;&＃61;obj.name,info.name);//true &＃39;kobe&＃39;

3.2、对象的浅拷贝 

var info &＃61; {
name:"why",
friends:{
name:"zhangsan",
height:1.88
}
};
var obj &＃61; Object.assign({},info);
obj.name &＃61; "kobe";
console.log(info.name);//why
info.friends.name &＃61; "lisi";
console.log(obj.friends.name);//lisi

3.3、对象的深拷贝  深拷贝不会互相影响

var info &＃61; {
name:"why",
age:12,
friends:{
name:"zhangsan",
height:1.88
}
};
var obj &＃61; JSON.parse(JSON.stringify(info));//深拷贝
console.log(obj);
info.name &＃61; "lisi";
console.log(obj.name);//why
info.friends.name &＃61; "zhaoliu";
console.log(obj.friends.name);//zhangsan

3.4、浅拷贝和深拷贝的另一种插件方式   lodash

lodash 实现浅拷贝&＃xff1a; _.clone(info)

var info &＃61; {
name:"why",
friends:{
name:"zhangsan",
height:1.88
}
};
var obj &＃61; _.clone(info);
info.name &＃61; "zhangsan"
console.log(obj.name);//why
info.friends.name &＃61; "zhaoliu";
console.log(obj.friends.name);//zhaoliu

lodash实现深拷贝&＃xff1a;_.cloneDeep(info)

var info &＃61; {
name:"why",
age:12,
friends:{
name:"zhangsan",
height:1.88
}
};
var obj &＃61; _.cloneDeep(info);
console.log(obj);
info.name &＃61; "lisi";
console.log(obj.name);//why
info.friends.name &＃61; "zhaoliu";
console.log(obj.friends.name);//zhangsan

本节课的知识点

1、表单 v-model 的基本使用

v-model 可以在input&＃xff0c;textarea,select元素上创建双向数据绑定

它会根据控件类型自动选择正确的方法来更新元素

input textarea checkbox radio select 的v-model用法

闲聊内容&＃xff1a;

算法和数据结构 是编程功底&＃xff0c;学习这些是为了对编程的理解更加深刻&＃xff0c;了解真相是为了获得真正的自由

事件循环&＃xff0c;浏览器&＃xff0c;v8引擎的东西

2、v-model 的修饰符

.lazy  本质是将input变为change事件的绑定  v-model.lazy

.number   默认情况下v-model 绑定的值是string类型

 .trim 去掉收尾空格

3、v-model也可以用在组件上  等讲到组件部分在具体来说

4、组件注册

全局组件

局部组件

sfc 开发模式

组件的名称&＃xff1a;

定义组件名称的方式有两种&＃xff1a;

方式一&＃xff1a;kebab-case(短横线分隔符)   只有一种用法&＃xff0c;咋定义咋使用

方式二&＃xff1a;PascalCase&＃xff08;驼峰标识符&＃xff09;  有两种用法&＃xff1a;1、允许使用分隔符方式使用&＃xff1b;2、直接使用驼峰方式【不推荐】

 一般真正在用的时候采用分隔符的方式使用组件