目录
一、概述
首先,吃井不忘挖水人,感谢公司看我蠢给免费培训。。。
vue官网文档链接: https://v3.cn.vuejs.org/guide/installation.html
VUE3基本变化
源码
1,源码通过monorepo的形式来管理源代码:
mono:单个;
repo:rebository仓库;
主要是将许多项目的代码存储在一个repository中;
多个包本身相互独立,可以有自己的功能逻辑、单元测试等,同时又在同一个仓库下方便管理;
模块划分更加清晰,可维护性、可拓展性更强;
2,源码使用ts进行重写:
vue2.x,使用Flow来进行类型检测;
vue3.x源码全部使用TS进行重构了
性能
使用proxy进行数据劫持:
vue2.x时候,使用Object.defineProperty来劫持数据的getter和setter方法,这种方法存在缺陷:当给对象添加或删除属性时,无法劫持和监听,不得不提供一些特殊的API,比如 $set 和 $delete (hack方法)。
Vue3.x开始使用Proxy来进行数据的劫持。
删除了一些不必要的API:$on $off $once
移除了一些特性:filter 内联模板等
编译优化:生成Block Tree,slot编译优化,diff算法优化
新的API
Options API---->Composition API
Options API包括data,props,methods,computed,生命周期等。内聚性相对差,比如created中会使用某个方法来修改data中的数据。
Composition API可以将相关联的代码放在同一处进行处理,不需要在多个options之间寻找。
Hooks函数增加代码复用性:
vue2.x中通常通过mixins在多个组件中共享逻辑,存在命名冲突;
vue3.x通过Hook函数将一部分独立的逻辑抽取出去,且是响应式的。
vue3.x使用
安装
1、在页面上以 CDN(Content Delivery Network/Content Distribution Network) 包的形式导入。
2、下载 JavaScript 文件并自托管。
3、使用 npm 安装它。
4、使用官方的 CLI 来构建一个项目,它为现代前端工作流程提供了 功能齐备的构建设置 (例如,热重载、保存时的提示等等)。
//CDN引入
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const why = {
template:'<h2>hello world</h2>'
}
const app = Vue.createApp(why)
app.mount("#app")
</script>
</body>
//本地引入
<body>
<div id="app"></div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
template:'<h2>白日依山尽,黄河入海流。欲穷千里目,更上一层楼。</h2>'
}).mount("#app")
</script>
</body>
计数器案例
//原生方法
<body>
<h2 class="counter">0</h2>
<button class="increment">+1</button>
<button class="decrement">-1</button>
<script>
//1、获取所有的元素
const counterEl = document.querySelector('.counter')
const incrementEl = document.querySelector('.increment')
const decrementEl = document.querySelector('.decrement')
//2、定义变量
let counter = 100
counterEl.innerHTML = counter
//3、监听按钮的点击
incrementEl.addEventListener('click',() => {
counter ++
counterEl.innerHTML = counter
})
decrementEl.addEventListener('click',() => {
counter --
counterEl.innerHTML = counter
})
</script>
</body>
//vue方法
<body>
<div id="app"></div>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
template: `
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
`,
data: function(){
return {
counter:100
}
},
methods:{
increment(){
this.counter ++
},
decrement(){
this.counter --
}
}
}).mount("#app")
</script>
</body>
Tips:声明式&&命令式编程
以上案例涉及到两种编程模式:声明式和命令式
写不动了,百度吧。。。。。。
Tips: MVVM模型
写不动了,百度吧。。。。。。
Template属性
使用createApp时,传入了一个对象
Template属性表示需要vue帮我们渲染的模板信息
不会被浏览器直接渲染
。。。。。。
两种template写法:
<body>
<div id="app"></div>
//1有提示无高亮
<script type="x-template" id="content">
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</script>
或
//2有提示有高亮
<template id="content">
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</template>
<script src="../js/vue3.js"></script>
<script>
Vue.createApp({
template: `#content`,//必须要以#开头,会被用作querySelector,并且使用匹配元素的innerHTML作为模板字符串
data: function(){
return {
counter:100
}
},
methods:{
increment(){
this.counter ++
},
decrement(){
this.counter --
}
}
}).mount("#app")
</script>
</body>
data属性
vue2.x:可以传入一个对象(官方推荐函数)
vue3.x:必须传入一个函数,否则报错
data中返回的对象会被系统劫持
methods
Tips:this
不应使用箭头函数来定义method函数,箭头函数绑定了父级作用域的上下文,this不会指向组件实例。
箭头函数不绑定this, this指向window,无法读取data
(箭头函数中使用了this,会去上层作用域中寻找,一直找到window)
vue源码
git 搜索 vue-next 选择一个稳定的版本git clone(推荐)下来
直接download不仅慢,后面会出现其他问题,解决办法如下:
在终端中完成以下三行
git init
git add .
git commit -m "文字"
遇到了node版本问题,说The engine “node” is incompatible with this module,下载一个新的稳定的node重装一下即可。
具体问题具体分析。
调试
根目录下继续执行以下
yarn install
yarn dev
(在packages/vue/dist/vue.global.js会发现和CDN上的打包的代码一毛一样)
packages/vue/examples文件夹下创建一个文件夹,其中可以创建一个html文件,引入vue.global.js文件。
就可以debugger了
上面这种方法不太方便。。。
直接在根目录的package.json文件中配置一下
–souecemap,将相关代码映射出去
"dev": "node scripts/dev.js --souecemap"
终端重新运行yarn dev,dist文件下会多一个vue.global.js.map文件
debugger后,能够显示断点的具体文件位置。
Tips:vscode添加代码片段
1,设置=》用户代码片段
2,选择一个语言
3,快速生成要写成片段的代码。链接: https://snippet-generator.app/
4,写上描述以及快捷键,复制粘贴到vscode中的html.json(或其他语言json文件)文件中
二、webpack
官方文档: https://webpack.js.org/
中文文档: https://webpack.docschina.org/
安装 webpack、webpack-cli(命令行运行工具,可选)
npm install webpack webpack-cli -g
执行webpack命令,会执行node_modules下.bin目录下的webpack;
webpack在执行时是依赖webpack-cli的,没有安装会报错;
webpack-cli中代码执行时,才是真正利用
三、vue3+vite+ts 记录
脚手架搭建不赘述了,网上一搜一大把。
依赖 以及 vite.config.ts配置
css预处理
path根路径