vue2 和vue3双向数据绑定原理不同：
2.0的响应式基于ES6的Object.defineProperty中的set和get方法，能够监听数据对象的变化，但是监听不到对象属性的增删、数组元素和长度的变化，时会在vue初始化的时候把所有的Observer（观察者）都建立好，才能观察到数据对象属性的变化。
为vue实现响应式时，把无法监听数组 api的情况通过重写数组的部分方法来实现响应式，但是只局限在以下7种方法
-
如何触发自动更新
-
-
（改变原始数据类型7个方法） push，pop，splice，unshift，shift，sort，reverse
-
-
-
解决方案（更新）： 覆盖data中的数组
-
-
Object.defineProperty(劫持的对象, '监听的属性', {
get: function() {
// 访问了被监听的对象的属性时触发
},
set: function(newVal) {
// 修改了被监听的对象的属性时触发
}3.0的响应式采用了ES6的Proxy来代替Object.defineProperty，可以做到监听对象属性的增删和数组元素和长度的修改，同时还实现了惰性的监听（懒观察）（不会在初始化的时候创建所有的Observer，而是会在用到的时候才去监听）但是，虽然主流的浏览器都支持Proxy
let newModel = new Proxy(代理的对象, {
get: function(target, key) {
// 访问了对象的属性时触发
},
set: function(target, key, newVal) {
// 修改了对象的任意属性时触发
}
})Vue3 ：对ts的支持更好，速度更快，体积减少，更易维护，更接近原生，更易使用，速度更快
为vue实现响应式时，把无法监听数组 api的情况通过重写数组的部分方法来实现响应式，但是只局限在以下7种方法
vue是什么?
-
vue是用于构建用户界面的javascript框架
-
vue是一个渐进式 自底层向上增量开发的MVVM框架
-
渐进式：就是vue是会做 自己管理的功能 不会影响其他没有管理的范围 所以vue可以很好的和第三方插件结合
-
增量：先完成项目的基本功能 来进行开发 然后再使用各种高级的vue插件来完成复杂的功能
-
-
安装 - vue-devtools 学习, 调试vue必备之利器 - 官方提供：csdn已写
MVVM
-
M：model
-
模型：存放数据，data
-
-
V：view
-
视图：就是用户可以看见的界面
-
-
VM：viewModel
-
视图模型：就是关联视图和模型之间的桥梁，用来在 数据层 和 视图层中间进行数据传递（双向绑定）
-
MVC
- MVC是Model-View-Controller的缩写，而MVVM是Model-View-ViewModel的缩写。
- 在MVC中，控制器(Controller)起到中介作用，负责处理用户的请求并更新模型(Model)和视图(View)之间的关系；而在MVVM中，视图模型(ViewModel)起到了这样的作用。
- 在MVC中，视图(View)通常直接从模型(Model)中获取数据并显示；而在MVVM中，视图(View)通过视图模型(ViewModel)获取数据并显示。
MVP
vite 和 webpack 的区别
v3使用的是vue/cli脚手架（实质上是帮助我们封装好了webpack来帮助我们构建与编译项目）
Vite 优势：快速冷启动运行工速度快，热更新，打包速度快，配置简单
对于小型项目和初学者，可以考虑使用 Vite，因为它可以快速启动开发环境，减少等待时间，让开发者可以更快地迭代代码并进行测试。对于大型项目和对构建性能有高要求的项目，可以选择 Webpack，因为它可以支持各种复杂的构建场景，并且可以通过各种插件和加载器来优化构建性能。
1.vite 开发服务器启动速度比 webpack 快 (快速冷启动)
webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
2.vite 热更新(修改代码自动编译)比 webpack 快
当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
3.vite 构建速度快，比 webpack 的 nodejs，快 10-100 倍。
Vite 劣势：
1.生态不及webpack，加载器、插件不够丰富
2.项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
下载和安装vue方式：npm yarn 安装用于学习语法
要先 init -y 创建package.json文件：然后下载vue
npm i [email protected]
npm i [email protected]data：两种创建方式
vue2：对象式（2正常用）：el:"属性名"， 正常的属性挂载.$mount() 方法。
<!-- 1.创建视图层 -->
<div id="demo">
{
{text}}
</div>
<script>
// 2.创建vm层，就是vue实例
let app = new Vue({
// //关联视图：el:'demo'
// el: '#demo'
// // 3.创建模型数据
// data:{
// text: '今天是个好日子',
// }
data(){
return{
text: '我很开心'
}
}
})
// 关联视图，挂载方式
app.$mount('#demo')
</script>vue3：函数式（2,3都可以用，推荐）
<!-- 在vue3中创建，要使用createApp()方法来进行创建 -->
<!-- 1.创建视图层 -->
<div id="demo">{
{text}}</div>
<script>
// 2.创建VM层，就是vue实例
Vue.createApp({
// 3.创建模型数据
data(){
return {
text: '我是vue3创建的'
}
}
})
//关联视图
.mount("#demo")
</script>data为什么是一个函数而不是对象：（推荐函数式）
如果是对象，多次复用组件时，会出现数据共用，改变一个组件的数据，其他的组件的数据也受到影响，产生数据污染
如果是函数，使用一次组件，data()调用一次，产生不同的对象，相互之间的数据不受影响
因此：组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，初始化数据时会将其作为工厂函数都会返回全新data对象