认识Vue
- Vue 是一套用户构建用户界面的渐进式框架。
- 渐进式框架表示我们我们可以在项目中引入和使用Vue,不一定需要全部Vue开发整个项目。
- Vue3版本兼容2.x,可以直接学习Vue3。
- vue3新特性:更好的性能、更小的包体积、更好的Ts集成、更优秀的API设计。
Vue3带来的变化
- 通过monorepo的形式管理源代码。
- 源码使用Ts进行重写。
- Vue2使用Flow进行类型检测,Vue3使用TS进行类型检测。
- 使用Proxy进行数据劫持。
- Vue2使用的是Object.defineProperty劫持数据的getter和setter方法。
- 移除了实例上的$on $off 和 $once.
- 新增Composition API
- 通过Hooks新增代码的复用性。
如何使用Vue
- Vue 本质是JavaScript库
- 引用–>使用
- 引用方式: 页面CDN方式引用;下载Vue的JavaScript文件,手动引入;用过npm引入。
CDN:通过相互连接的网络系统,利用最靠近每个用户的服务器;
更快、更可靠的将应用程序以及其他文件发给用户;
来提供高性能、可扩展性以及低成本的网络内容。
- CDN 内容分发网络 (cdn服务器)
- 项目—> 打包(静态资源) —>部署 —> 用户访问
- 服务器放在哪里?
CDN的理解
云服务器(北京) —> 北京用户比较近,网络传输高效
其他地方访问资源 速度比较慢
使用 CDN服务器,通过内容分发网络找到离用户最近的服务器,给用户派发资源
CDN 服务器 的边缘节点(服务器) —> 父节点 —> 源站
开源 CDN服务器 : unpkg、JSDelivr、cdnjs;
Vue3 使用
// data属性的使用
data: function () {
return {}
}
- Vue中的this拿到的是proxy代理。
- 声明式编程和命令式编程 两种不同编程范式
(原生)命令式编程关注的是"怎么做";
(Vue)声明式编程关注的是"做什么";
由框架(机器)完成"怎么做"
- 目前流行声明式编程
MVVM模型
- MVC 是 Model-View-Controller的简称
- MVVM 是Model-View-ViewModel的简称
- Vue是MVVM的框架
- Vue虽然并没有完全遵守MVVM的模型,但是整个设计是收到它的启发的(Vue官方说明)
template属性
- 在使用createApp的时候,我们传入的是一个对象。
- template属性:表示的是Vue需要帮助我们渲染的模板信息。
目前我们看到它里面有很多的HTML标签,这些标签会替换掉我们挂载到的元素的innerHTML。
template这个元素不是Vue中特有的元素,这个元素是html原生提供的,html默认情况下,里面的东西是不会被浏览器渲染出来的,作用:是用来被JavaScript源代码读取的
- mdn文档(重要学习文档)
data属性
- data属性是传入一个函数,并且该函数返回一个对象
- data中返回的对象会被Vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理。
methods属性
- methods属性是一个对象,会在这个对象中定义很多的方法。
- 可以绑定到template模板中
- 可以this关键字直接访问到data中返回对象的属性。
不应该使用箭头函数定义methods函数,理由:箭头函数绑定"父级作用域的上下文,所以this不会按照期望指向组件实例"
increment() {
this.counter += 1;
},
问题一:为什么不能使用箭头函数?
问题二:在不使用箭头函数的情况下,this到底指向什么?
Vue3源码
github.com —> vue-next —> Tag(稳定版本) —> clone 链接
npm install yarn -g
download vue3 的时候需要执行以下操作
git init
git add .
git commit -m ‘vue3项目’
package.json 中的 dev命令之后 加上 --sourcemap(代码映射)