重启Vue3学习

Posted 2023-04-06 Zain Lau

编码能力太差了，力扣也刷不动，只能耍耍前端这样子

太浮躁了

今天开始重学Vue和Linux

全局Vue API更改为应用程序实例

API可做Tree shakable优化
在vue2.0有不少的全局api是作为静态函数直接挂在在Vue构造函数上的，你应该手动操作过DOM,会遇到如下模式。如果我们未是在代码中用过它们，就会形成我们所谓的"死代码",这类全局api造成的"死代码"无法使用webapck的tree-shaking进行’死代码消除’。

因此，vue3.0做了相应的改变，将它们抽离成为独立的函数，这样打包工具的摇树优化可以将这些"死代码"排除掉。全局 API 现在只能作为 ES 模块构建的命名导出进行访问。

受影响的API

Vue2.x中这些全局API受此更改的影响：在这里插入代码片

Vue.nextTick
Vue.observable(用Vue.reactive替换)
Vue.version
Vue.compile(仅完全构建时)
Vue.set(仅兼容版本)
Vue.delete(仅兼容版本)

在 Vue2.x 中具名插槽和作用域插槽分别使用slot和slot-scope来实现， 在 Vue3.0 中将slot和slot-scope进行了合并同意使用。

在 Vue 2.0 发布后，开发者使用 v-model 指令必须使用为 value 的 prop。如果开发者出于不同的目的需要使用其他的 prop，他们就不得不使用 v-bind.sync。此外，由于v-model 和 value 之间的这种硬编码关系的原因，产生了如何处理原生元素和自定义元素的问题。
在 Vue 2.2 中，我们引入了 model 组件选项，允许组件自定义用于 v-model 的 prop 和事件。但是，这仍然只允许在组件上使用一个 model。
在 Vue 3 中，双向数据绑定的 API 已经标准化，减少了开发者在使用 v-model 指令时的混淆并且在使用 v-model 指令时可以更加灵活。
2.x语法

在 2.x 中，在组件上使用 v-model 相当于绑定 value prop 和 input 事件：

如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项

在vue2.0中，功能组件有两个主要用途：

性能优化提高，因为它们的初始化速度比有状态组件快
可以返回多个根节点

然而，在 Vue 3 中，有状态组件的性能已经提高到可以忽略不计的程度。此外，有状态组件现在还包括返回多个根节点的能力。
因此，功能组件剩下的唯一用例就是简单组件，比如创建动态标题的组件。否则，建议你像平常一样使用有状态组件。

总结：非特殊情况下，官网还是建议我们使用有状态的组件

VUE学习，vue运行环境搭建遇见的小问题

1.使用vscode来编辑项目，那么首先给它搭一个vue运行的环境，打开集成终端，使用npm install live-server -g安装live-server.

problem1:cmd终端分行问题。解决方法：打开cmd.exe，右击其最右上角，选择属性，选择使用旧版本，重启vscode即可。

problem2:终端打开 live-server以后无法关闭。解决方法：暂时保留