大家好 ，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心
金三银四快要到来了，希望各位想找工作的朋友们要做好准备啊，今天就带着大家来复习一下Vue的50个知识点哦~~~
优点：
缺点：
Vue的全家桶，你可以选择不用，或者只选几样去用，比如不用vuex
相同点：
不同点：
MVC
注意：Vue不严格符合MVVM，因为MVVM规定Model和View不能直接通信，而Vue可以使用
ref进行通信
防止组件被多个页面使用时，造成的变量互相污染
.lazy：输入框失焦时才会更新v-model的值.trim：讲v-model绑定的值首位空格给去掉.number：将v-medol绑定的值转数字.stop：阻止事件冒泡.capture：事件的捕获.self：点击事件绑定本身才触发.once：事件只触发一次.prevent：阻止默认事件.native：绑定事件在自定义组件上时，确保能执行.left、.middle、.right：鼠标左中右键的触发passive：相当于给移动端滚动事件加一个.lazycamel：确保变量名会被识别成驼峰命名.sync：简化子修改父值的步骤全局钩子
beforeEach：跳转路由前
to：将要跳转进入的路由对象
from：将要离开的路由对象
next：执行跳转的方法
afterEach：路由跳转后
to：将要跳转进入的路由对象
路由独享钩子
routes: [
{
path: '/xxx',
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]组件内路由钩子
v-text：元素的textContentv-html：元素的innerHTMLv-show：通过样式display改变显隐v-if：通过操作DOM改变显隐v-else：配合v-ifv-else-id：配合v-elsev-for：循环渲染v-on：绑定事件，缩写@v-bind：绑定变量，缩写:v-model：双向绑定v-slot：插槽v-once：只渲染一次v-pre：跳过元素编译v-cloak：隐藏双括号，有值再显示props接收$emit对父组件进行传值$parent和$chidren获取实例进而通信vuex进行状态管理eventBus进行跨组件值传递provide和inject，官方不建议使用$ref获取实例，进而传值<div :class="{ 'is-active': true, 'red': isRed }"></div><div :class="['is-active', isRed ? 'red' : '' ]"></div><div :style="{ color: textColor, fontSize: '18px' }"></div>v-if：通过操作DOM来控制显隐，适用于偶尔显隐的情况v-show：通过改变样式display属性控制显隐，适用于频繁显隐的情况computed：依赖多个变量计算出一个变量，且具有缓存机制，依赖值不变的情况下，会复用计算值。computed中不能进行异步操作watch：通常监听一个变量的变化，而去做一些事，可异步操作computed的多对一，watch一对多beforeCreate：实例Vue，未初始化和响应式数据created：已初始化和响应式数据，可访问数据beforeMount：render调用，虚拟DOM生成，未转真实DOMmounted：真实DOM挂载完成beforeUpdate：数据更新，新虚拟DOM生成updated：新旧虚拟DOM进行对比，打补丁，然后进行真实DOM更新beforeDestroy：实例销毁前，仍可访问数据destroy：实例销毁，子实例销毁，指令解绑，解绑本实例的事件activated：keep-alive所缓存组件激活时调用deactivated：keep-alive所缓存组件停用时调用errorCaptured：子孙组件的错误捕获，此函数可返回false阻止继续向上传播v-for优先级高于v-if，每项都通过v-for渲染出来后再去通过v-if判断显隐，做了很多无用功
state：定义初始状态getter：从store从取数据mutation：更改store中状态，只能同步操作action：用于提交mutation，而不直接更改状态，可异步操作module：store的模块拆分父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
Vue.set(target, key, value)Vue.delete(target, key)splice：arr.splice(index, 1, value)Vue.set(target, index, value)具体：https://juejin.cn/post/6949848530781470733
普通插槽 普通插槽slot会被当做子元素进行解析，最终会被解析成一个_t函数，他接收的第一个参数为插槽的名称，默认是default，也就是_t('default')，执行此函数进行最终元素的渲染，如果是具名插槽，则传对应的插槽名 作用域插槽 插槽会被封装成一个函数放置在scopeSlotes对象中，解析时_t第二个参数接收子组件的数据，并进行渲染
举个例子：
<div v-for="(item, index) in list" :key="index">{{item.name}}</div>
list: [
{ name: '小明', id: '123' },
{ name: '小红', id: '124' },
{ name: '小花', id: '125' }
]
渲染为
<div key="0">小明</div>
<div key="1">小红</div>
<div key="2">小花</div>
现在我执行 list.unshift({ name: '小林', id: '122' })
渲染为
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小红</div>
<div key="3">小花</div>
新旧对比
<div key="0">小明</div> <div key="0">小林</div>
<div key="1">小红</div> <div key="1">小明</div>
<div key="2">小花</div> <div key="2">小红</div>
<div key="3">小花</div>
可以看出，如果用index做key的话，其实是更新了原有的三项，并新增了小花，虽然达到了渲染目的，但是损耗性能
现在我们使用id来做key，渲染为
<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>
现在我执行 list.unshift({ name: '小林', id: '122' })，渲染为
<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小红</div>
<div key="125">小花</div>
新旧对比
<div key="122">小林</div>
<div key="123">小明</div> <div key="123">小明</div>
<div key="124">小红</div> <div key="124">小红</div>
<div key="125">小花</div> <div key="125">小花</div>
可以看出，原有的三项都不变，只是新增了小林这个人，这才是最理想的结果用index和用随机数都是同理，随机数每次都在变，做不到专一性，很渣男，也很消耗性能，所以，拒绝渣男，选择老实人
这里只说Vue2的
bind：指令绑定到指定元素时调用，只调用一次inserted：指定元素插入父节点时调用update：所在组件的 VNode 更新时调用componnetUpdated：所在组件以及其子组件 VNode 全部更新后调用unbind：只调用一次，指令与元素解绑时调用修改数据时不能马上得到最新的DOM信息，所以需要使用nextTick，在nectTick回调中可以获取最新DOM信息
优先是Promise.then方法，是个微任务，这样可以避免多一次队列，进而少一次UI渲染，节省性能
SSR全称Server Side Render
Object.defineProperty对对象进行递归劫持属性的get、setwatcher进行观察数据使用的地方dep收集watcher，数据更改时，通过notify方法通知dep里的watcher去进行相应的更新数组的元素大概率是成百上千的，所以对数组下标进行劫持的话会非常消耗性能。Vue通过对数组原型上方法的重写，实现数组的响应式
具体：https://juejin.cn/post/6969563640416436232
具体：https://juejin.cn/post/6974293549135167495
Vue.set(target, key, value)
export default function set(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.__ob__
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}Vue.delete(target, key)
export default function del (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.__ob__
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}维护一个数组，每次调用时讲回调函数压入这个数组，然后优先选择微任务，在微任务回调中去执行数组中的所有回调，同时维护一个布尔值，确保每一次队列进行一次执行数组所有回调
let callbacks = []; //回调函数
let pending = false;
function flushCallbacks() {
pending = false; //把标志还原为false
// 依次执行回调
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]();
}
}
let timerFunc; //先采用微任务并按照优先级优雅降级的方式实现异步刷新
if (typeof Promise !== "undefined") {
// 如果支持promise
const p = Promise.resolve();
timerFunc = () => {
p.then(flushCallbacks);
};
} else if (typeof MutationObserver !== "undefined") {
// MutationObserver 主要是监听dom变化 也是一个异步方法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
} else if (typeof setImmediate !== "undefined") {
// 如果前面都不支持 判断setImmediate
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 最后降级采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
export function nextTick(cb) {
callbacks.push(cb);
if (!pending) {
pending = true;
timerFunc();
}
}虚拟dom
虚拟dom是一个对象，一个描述真实DOM的对象，每次数据更新时，新旧虚拟DOM都会互相进行同层对比，而diff算法优化就是在此时做优化的。
diff算法
patch方法，传入新旧虚拟DOM，开始同层对比isSameNode方法，对比新旧节点是否同类型节点patchNode进行对比节点updateChildren方法进行新旧子节点的对比props: {
num: {
default: 1,
validator: function (value) {
// 返回值为false则验证不通过，报错
return [
1, 2, 3, 4, 5
].indexOf(value) !== -1
}
}
}
}Vue实例初始化的时候立即调用watch的监听回调函数
mounted() {
Object.keys(this.params)
.filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
.forEach((_) => {
this.$watch((vm) => vm.params[_], handler, {
deep: true,
});
});
},
data() {
return {
params: {
a: 1,
b: 2,
c: 3,
d: 4
},
};
},
watch: {
params: {
deep: true,
handler() {
this.getList;
},
},
}样式模块化scoped的效果，在本组件的标签都会带上data-v-xxx的属性，然后通过属性选择器实现样式模块化的效果
这是我们常用的使用定时器的方式
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具体执行内容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：
export default{
methods:{
fn(){
let timer = setInterval(()=>{
//具体执行代码
console.log('1');
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：
//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
// 子组件
mounted () {
this.$emit('childMounted')
},使用hook的话可以更方便：
//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},引用数据类型响应式，基础数据类型不响应式
同时存在时，el > $mount
<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />
更改如有组件上的key即可
export default: {
model: {
event: 'change',
prop: 'checked'
}
}使用this.$options.data().xxx获取初始值
computed比较好，computed有缓存机制，可以节省性能。而method则每次更新都会重新计算，不考虑缓存
router.push：跳转，并向history栈中加一个记录，可以后退到上一个页面router.replace：跳转，不会向history栈中加一个记录，不可以后退到上一个页面router.go：传正数向前跳转，传负数向后跳转本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/rqoZ5KWqT_1QAx91bJMeIg
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。
日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。
日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。
近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。
据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。
9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...
9月3日消息，亚马逊的一些股东，包括持有该公司股票的一家养老基金，日前对亚马逊、其创始人贝索斯和其董事会提起诉讼，指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息，为推广自家应用，苹果现推出了一个名为“Apps by Apple”的网站，展示了苹果为旗下产品（如 iPhone、iPad、Apple Watch、Mac 和 Apple TV）开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价，引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金（Future Fund）管理合伙人加里·布莱克发帖称，降价是一种“短期麻醉剂”，会让潜在客户等待进一步降价。
据外媒9月2日报道，荷兰半导体设备制造商阿斯麦称，尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效，但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日，根据美国证券交易委员会的文件显示，苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元（约 4.65 亿元人民币）。用于在 2023-2025 年期间，发射卫星，进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道，马斯克旗下社交平台𝕏（推特）日前调整了隐私政策，允许 𝕏 使用用户发布的信息来训练其人工智能（AI）模型。新的隐私政策将于 9 月 29 日生效。新政策规定，𝕏可能会使用所收集到的平台信息和公开可用的信息，来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日，荣耀CEO赵明在采访中谈及华为手机回归时表示，替老同事们高兴，觉得手机行业，由于华为的回归，让竞争充满了更多的可能性和更多的魅力，对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能（AI）系统，该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日，非营利组织纽约真菌学会（NYMS）发出警告，表示亚马逊为代表的电商平台上，充斥着各种AI生成的蘑菇觅食科普书籍，其中存在诸多错误。
社交媒体平台𝕏（原推特）新隐私政策提到：“在您同意的情况下，我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上，各大企业都带来了最新的理念和产品，而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品，具体内容为：“以我对我‘子公司’的了解，我认为 iPhone 15 跟 iPhone 14 不会有什么区别的，除了序（列）号变了，这个‘不要脸’的东西，这个‘臭厨子’。
