01.Vue3启示录:Vue2的optionsAPI-data、methods和template

coderHan_

已于 2022-10-19 18:16:18 修改

阅读量424

点赞数 1

分类专栏： vue3.js 文章标签： vue.js javascript 前端

于 2022-09-15 11:08:14 首次发布

本文链接：https://blog.csdn.net/HGJyujian/article/details/126856922

版权

vue3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

认识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(代码映射)