1.请注意：
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
- 所有被vue管理的函数，应当用普通函数
- 定义在data中的数据，vue才会做数据劫持，数据代理
- Vue.set() == vm.$set()
- beforeUpdate():此时数据是新的，但页面是旧的
- vue组件本质是一个VueComponent的构造函数，是Vue.extend生成的，每次调用Vue.extend，返回的都是一个新的VueComponent
2.数据代理
例：
let person = {
name:'张三',
}
//vue2实现响应式
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//控制属性是否可枚举，默认false
writable:true,//控制属性是否可修改，默认false
configurable:true,//控制属性是否可删除，默认false
//当读取person的age属性时，get函数(getter)就会被调用，且返回值
get(){
return number
},
//当修改person的age属性时，get函数(setter)就会被调用，且会收到修改的具体值
set(value){
number = value
}
})
// 模拟vue3实现响应式
const p = new Proxy(person, {
get(target, propName) {
console.log(`有人读取了p身上的${propName}属性`, target, propName);
return target[propName];
},
set(target, propName, value) {
console.log(
`有人修改了p身上的${propName}属性`,
target,
propName,
value
);
target[propName] = value;
},
deleteProperty(target, propName) {
console.log(`有人读删除了p身上的${propName}属性`, target, propName);
return delete target[propName];
},
});
3.随记
- 查看vue脚手架隐藏的webpack相关配置指令：vue inspect > output.js
- this.$destory()销毁自定义事件，不销毁原生事件
- vc示例->vc原型对象->vue原型对象->obj原型对象
- vuex action(逻辑)、mutation(执行)
vm.$watch('isHot',{
immediate:true,
handler(newVal,oldVal){
console.log()
}
})
<h2 v-cloak>{{name}}</h2>
<style>
[v-cloak] {
display:none;
}
</style>
4.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质上做了两件事：
1. 调用原生对应的方法对数组进行更新；
2. 重新解析模板，进而更新页面；
5.在vue修改数组中某个元素要用如下方法：
- 使用：push()、pop()、shift()、unshift()、splice()、sort()、reverse();
- Vue.set() 或 vm.$set()
- 特别注意：Vue.set() 和 vm.$set() 不能给vm或vm的根数据对象添加属性
6.跨域
- core 后端解决
- jsonp script标签的src不受同源策略影响，只能用get（前后端）
- 代理 （1.nginx 2.vue-cli）
7.vue3
- 使用proxy代替defineProperty实现响应式
- reactive函数：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
- shallowReactive：只处理对象最外层属性的响应式（浅响应式）
- shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
- readonly与shallowReadonly
- toRaw：将一个有reactive生成的响应式对象转为普通对象
- markRaw：标记一个对象，使其永远不会再成为响应式对象
8.响应式数据判断
- isRef：检查一个值是否为ref对象
- isReactive：检查一个对象是否由reactive创建的响应式代理
- isReadonly：检查一个对象是否由readonly创建的只读代理
- isProxy：检查一个对象是否由reactive或者readonly方法创建的代理
9.常见DOM操作
获取DOM：
- 通过使用 getElementById() 方法匹配元素的id属性来访问元素节点，对元素节点进行操作
- 通过使用 getElementsByTagName() 方法匹配元素的tagName来访问元素节点，对元素节点进行操作
- 通过使用 getElementsByClassName() 方法匹配元素的className来访问元素节点，对元素节点进行操作
- 值得注意的是， getElementsByTagName() 和 getElementsByClassName() 这两种方法因为其访问的是节点中的可能为复数的属性，所以得到的会是一个以数组的形式来体现出来的元素节点集合，我们可以通过打印获取到的DOM节点来判断类型
DOM事件：
- onclick事件---当用户点击时执行
- onload事件---当用户进入时执行
- onunload事件---用用户离开时执行
- onmouseover事件---当用户鼠标指针移入时执行
- onmouseout事件---当用户鼠标指针移出时执行
- onmousedown事件---当用户鼠标摁下时执行
- onmouseup事件---当用户鼠标松开时执行
