vue3.0不同于vue2.x的一些地方
vue3.0不同于vue2.x的一些地方
1. Composition-Api
vue2.x使用的是 Options APIs vue3.0 仍然支持vue2.x 的那种选项API(Options APIs)的方式
vue2.x的这种Options APIs，每开发一个功能时，就会在很多地方添加一些零散的代码，对新手来说，是比较友好的,但对长期维护一个比较大型的项目的人来说，你会发现，你要去改一个功能，会比较费劲
composition API 的优势：
- 没有
this，（vue2.x里面的东西比较乱，比较杂，而且任何时候都是指向当前vue组件） - 更好的类型推导能力（Typescript），不用做太多的类型注解，表现在：
- 更好的静态检查
- 更好的编程体验，类型推导，包括Props
- 单模板文件进行类型检查+ 自动补全
- 更友好的
Tree-shaking支持（渐进式体验），主要表现在 需要 哪个成员就import哪个，按需加载，打包时也是 import了哪个就打包哪个，按需打包。这样的方式对后面webpack的打包有很多大的帮助。Tree-shaking的本质就是消除无用的js代码，而Tree-shaking的使用前提是 他要能够分辨这个对象有没有被使用到，如果是一个对象具体的某一个方法或属性，那么他就很难分辨它到底有没有被使用。
如何开启
Tree-shaking，在webpack.config.js文件中在optimization设置下面两个参数
module.exports = {
mode: 'none',
optimization: {
// 模块只导出被使用的成员
usedExports: true,
// 压缩输出结果
minimize: true
}
}
- 更大的代码压缩空间
- 对
Tree-shaking更好的支持 vue3.0使用的api都是一些成员的名字，可以理解为变量名，对压缩工具比较熟悉的朋友就比较清楚，变量名被压缩的时候都会被替换成一些简短的字符。而对象的属性是不会被替换成简短的字符的。所以说，使用这个方式单个导出成员，他的压缩空间会更大一些。尤其是我们使用API越多时，压缩空间就越大
- 对
- 更灵活的逻辑复用能力
注：Composition-API作为新增的api不会影响旧的逻辑代码，并且Mixin不再推荐使用。更多关于Composition-API请参考官网
2.Compiler
- 优化1：
1.静态Node不再作更新处理（hoistStatic->SSR 优化）
2.静态绑定的class、id不再作更新处理
3.结合打包Hint，进行更新分析（动态绑定） - 优化2：
1.事件监听器Cache缓存处理（cacheHandles）
2.hoistStatic自动针对多静态节点进行优化，输出字符串，按需引入 - 总结：
1.Virtual DOM机制调整
2.内存优化，更少的占用
3.按需加载，更灵活的组件化
更多效果课前往官网的vue-next-template进行尝试
3.新增功能
Fragment- 不受根节点限制，渲染函数可接受 ArrayTeleport- 类似Portal，随用随取，例如：弹窗、ActionsSuspense- 嵌套异步依赖，例如：async setup()
4. 数据劫持
vue3.0的数据劫持是由Proxy实现的，而Proxy的数据劫持能力相比于Object.defineProperty()强很多，它几乎可以捕获到响应式对象的任意一种操作
vue2.x的数据劫持是由Object.defineProperty()实现的，Object.defineProperty()也就是使用getter、setter的方式去把它包装成一个响应式的对象，而这种getter、setter方式有个缺点就是，我们动态的往对象添加一些成员，它是没办法捕获到的
// reactive 将对象包装成一个响应式对象（Proxy对象
const state = reactive({
...
})
// vue 2.x
data: ()=> {
...
}
5.新建一个vue3.0项目
@vue/cli 4.5版本以后，都支持vue3.0
- @vue/cli 版本 大于 4.5
vue create vue3 - @vue/cli 版本 小于 4.5
- 首先先正常创建一个vue2.x的项目
vue create vue3 - 然后再为创建好的项目(vue3) 添加
vue-next就可以了
vue add vue-next
- 首先先正常创建一个vue2.x的项目
6.Vite
大致原理是拦截import发出的http请求，将代码返回给浏览器，也保留了import语法，让浏览器自己去处理依赖script type module 支持import。让浏览器处理es6 import的活，好处就是当前页面引用多少，编译多少，项目越大优势越大。
Vite相对于webpack这种工具，主要是解决开发阶段时使用webpack的一些体验上的不足
Vite是一个 HTTP服务器，特殊的地方在于：
1.可以在单文件中书写es6语法
2.支持热更新（请求的内容才会被打包/更新，其实也就是有用到的东西才会被打包或更新），而且更新的速度比使用webpack快很多
3.Rollup打包
7.新建一个基于vite的vue3.0项目
1.自动生成（从上往下执行）
npm init vite-appcdnpm installnpm run dev
2.手动生成（从上往下执行）
npm install -g vite全局安装vitenpm init -y生成一个 package.jsonnpm i -S vue@next添加vue依赖npm i -D @vue/compiler-sfc添加vue3.0依赖- 新建一个main.js
import {
createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app');
- 新建一个App.vue,内容自定义
- 新建一个 index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vitetitle>
head>
<body>
<div id="app">div>
<script src="./main.js" type="module">script>
body>
html>
- 最后直接在cmd上敲
vite命令或者vite serve命令就可以执行项目。
注： vite/vite serve是运行项目 vite build 是打包项目
8. 如何引入Vue-Router4
现阶段由于更新比较快，所以安装最新版本的Vue-Router会较好
1.查看 vue-router的所有版本号
npm info vue-router versions
2.安装最新的vue-router，目前是这个[email protected]，后面有更新就安装最新的
npm install [email protected] --save
3.在这里我就使用vite官方自动生成项目来做，在src目录下，新建一个router文件夹，文件夹新建一个index.js，内容如下
// 按需引入依赖
import {
createWebHashHistory, createRouter} from 'vue-router'
const history = createWebHashHistory()
const router = createRouter({
history,
routes: [
{
path: '/', component: () => import('../components/HelloWorld.vue') },
{
path: '/home', component: () => import('../components/Home.vue') }
]
})
export default router
在main.js引入，并使用该路由
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import './index.css'
// 下面要这样拆分来写
const app = createApp(App)
app.use(router)
app.mount('#app')
接下来路由对应组件的创建跟路由跳转的操作是跟vue2.x一样的
记录总结一下自己学到的东西。可能写得不是很好，有错误的东西请大家指正，互相学习！！