【Vue3】李南江老师讲解--个人笔记（一）

太喜欢李南江老师了，自带二倍速还可以讲的明明白白，又拥有一个有趣的灵魂~i了i了

【vue3笔记】

vue2和vue3的区别：

1.vue2使用Object.defineProperty方法实现响应式数据
缺点：无法检测到对象属性的动态添加和删除
无法检测到数组的下标和length属性的变更
解决方案：
vue2提供Vue.$set动态给对象添加属性
Vue.$delete动态删除对象属性
重写数组的方法，检测数组变更2
2.vue3使用proxy实现响应式数据
优点：可以检测到代理对象属性的动态新增和删除
可以见到测数组的下标和length属性的变化
缺点：es6的proxy不支持低版本浏览器 IE11
回针对IE11出一个特殊版本进行支持

vue3的新特性：

性能比vue2快一到两倍：diff算法优化：在创建虚拟DOM的时候，会根据DOM中的内容会不会发生变化，添加静态标记。静态提升：对不参与提升的元素，做静态提升，只会被创建一次，在渲染时直接复用。事件监听缓存：默认onClick会被视为动态绑定，所以每次都会追踪他的变化，但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可。

按需编译，体积比vue更小

Composition API：组合API

更好的TS支持

暴露了自定义渲染API

更先进的组件

关于vue3的setup（）函数

setup（）函数是组合API的入口函数，在setup()中定义的变量/方法，要想在外界使用，必须使用return {xxx，xxx}暴露出去

setup（）是在beforeCreate和Created之间执行的，由于在执行setup函数的时候，还没有执行Created生命周期方法，所以不可以使用data和methods，所以，为了避免使用data值的错误使用，vue直接将setup函数中的this修改成了undefined。

setup（）函数只能是同步的不能是异步的

setup（）可以使用ref，reactive定义响应式数据，本质上就是将传入的数据包装成一个Proxy对象。使用reactive必须是对象（JSon/arr）

【三种方式】创建vue3项目：

–webpack
git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

– vue-cli
npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-text
npm run serve

– vite
安装vite： npm install -g create-vite-app
创建项目:
create-vite-app projectName
cd projectName
npm install
npm run dev

注意点：
搭好之后，按需下载需要的资源，例如：
npm install --save element-ui
npm install --save axios

补充知识点

框架和库的区别：
框架：是一整套的完整的解决方案，换框架的话，需要重构整个项目；
库：也就是使用是插件，修改需要使用的插件就可以，可以实现无缝切换。
vue的核心概念：
1，通过数据驱动界面更新，不操作Dom来更新页面；2，组件化开发，可以将网页拆分成一个个的组件来编写

let vm = new Vue({
    router,
    store,
    el: '#app',
    render: (h) => h(App) //  Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果
});

render函数是渲染一个视图，然后提供给el挂载，没有render的话，页面什么都出不来。Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树