vue笔记-01
认识vue
vue为一套渐进式框架
渐进式框架：即一开始不需要你完全掌握它的全部特性，可以后续逐步增加功能；就是你可以用我的一部分，而不是用了我这一点就必须用我的所有部分
vue所占有地位
学习哪一门语言更容易找到工作？
找后端的工作：优先推荐Java，其次推荐Go，再次推荐Node（JavaScript），可能不推荐PHP、C#；
找前端的工作：优先推荐JavaScript（TypeScript）、其次Flutter、再次Android（Java、Kotlin）、iOS（OC、Swift）;
其他方向：游戏开发、人工智能、算法工程师
那么，就前端来说，学习了HTML、CSS、JavaScript，哪一个框架更容易找到工作？
如果去国外找工作，优先推荐React、其次是Vue和Angular，不推荐jQuery了；
如果在国内找工作，优先推荐、必须学习Vue，其次是React，其次是Angular，不推荐jQuery了
或者可以再加上小程序
学习vue2还是vue3？
尤雨溪：直接学vue3就行了，基础概念是一模一样的
vue3带来的变化（源码）
-
源码通过monorepo的形式来管理源代码：
- Mono：单个
- Repo：repository仓库
- 主要是将许多项目的代码存储在同一个repository中；
- 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
- 而且模块划分的更加清晰，可维护性、可扩展性更强；
-
源码使用TypeScript来进行重写：
-
在Vue2.x的时候，Vue使用Flow来进行类型检测；
-
在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；
-
Vue3带来的变化（性能）
-
使用Proxy进行数据劫持
-
在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的；
-
这种方式一致存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；
-
所以在Vue2.x的时候，不得不提供一些特殊的API，比如 s e t 或 set或 set或delete，事实上都是一些hack方法，也增加了 开发者学习新的API的成本；
-
而在Vue3.x开始，Vue使用Proxy来实现数据的劫持，这个API的用法和相关的原理我也会在后续讲到；
-
-
删除了一些不必要的API：
- 移除了实例上的$on, $off 和 $once；
- 移除了一些特性：如filter、内联模板等；
-
包括编译方面的优化：
- 生成Block Tree、Slot编译优化、diff算法优化；
Vue3带来的变化（新的API）
- 由Options API 到 Composition API：
- 在Vue2.x的时候，我们会通过Options API来描述组件对象；
- Options API包括data、props、methods、computed、生命周期等等这些选项；
- 存在比较大的问题是多个逻辑可能是在不同的地方：
- 比如created中会使用某一个method来修改data的数据，代码的内聚性非常差；
- Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找；
- Hooks函数增加代码的复用性：
- 在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑；
- 但是有一个很大的缺陷就是 mixins也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题；
- 在Vue3.x中，我们可以通过Hook函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的；
如何使用vue?
vue本质上就是一个别人帮我们封装好的javaScript库
在项目中直接可以引入并且使用它即可
安装和使用vue这个javaScript库有哪些方式？
- 在页面中通过cdn的方式来引入
cdn服务器理解
我们项目完成后会进行打包形成静态资源，但是此时用户无法直接进行访问，所以我们需要对次资源进行部署到服务器，最后用户即可通过访问服务器进行下载使用
因为访问速度与服务器所在地址有关，如服务器部署在广州、北京甚至国外，此时对应地区访问的速度将不同，谁近谁快，但是如果在多地部署多个服务器的话依旧无法平衡各地用户访问速度的统一
所以即使即可使用cdn的服务器
利用内容分发网络，利用最靠近用户的服务器进行分发资源
cdn不是一个服务器，而是一大堆服务器在各个地区（称为边缘节点）组成的内容分发网络
如果用户所需资源在最近服务器中找不到时就会往父级节点进行寻找，如果层层寻找不到时，会到最后的原栈进行下载，然后分到父节点，再分到边缘节点
<div id="app">div>
<script src="https://unpkg.com/vue@next">script>
<script>
// 创建一个你要显示内容的对象进行传入
const why = {
template: `hello world
`
// 此时我们并没有将h2标签的内容放入id为app的div中，
// 但是已经实现类比以下的效果
//
// hello world
//
}
//调用Vue.createApp()后会返回一个对象
const app = Vue.createApp(why)
// 接收到创建出来的vue实例之后可以进行挂载
app.mount('#app')
script>
源码里第一行即定义了一个变量vue — 定义它为一个js对象
我们在使用时也是在使用这个vue所具有的各个属性
- 下载vue的javaScript文件，并且自己手动引入
手动引入的话可以输入https://unpkg.com/vue@next网址后
复制所有内容，然后在项目下新建一个js文件进行粘贴
最后直接引入我们粘贴的js文件即可
<div id="app"></div>
<script src="../js/vue.js"></script>
<script>
//简写形式--链式编程
Vue.createApp({
template:`你好！
`
}).mount('#app')
</script>
计数器案例
1. 原生计数器的书写
原生开发中为命令式编程：how to do 怎么去做
①、定义元素②、拿元素③、修改元素的数据或者属性
<h2 class="counter"></h2>
<button class="increment">+1</button>
<button class="decremnet">-1</button>
<script>
// 1、获取所有的元素
const counterEl = document.querySelector(".counter");
const incrementEl = document.querySelector(".increment");
const decremnetEl = document.querySelector(".decremnet");
// 2、定义变量
let counter = 100;
counterEl.innerHTML = counter;
// 3、监听按钮的点击
incrementEl.addEventListener('click',() => {
counter += 1;
counterEl.innerHTML = counter;
})
decremnetEl.addEventListener('click',() => {
counter -= 1;
counterEl.innerHTML = counter;
})
</script>
2. vue实现计数器
vue 使用的是声明式编程：what to do 需要做什么，由框架（机器）完成‘How’ 的过程
（声明式编程更为流行）
①、所有的数据，方法均以先声明好了
② 将事件或者数据进行绑定
<!-- 此处的“哈哈哈哈”不会显示，因为挂载内容会被template先进行清空然后再进行替换 -->
<div id="app">哈哈哈哈</div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
// ``使用模板字符串可以实现换行但不影响结果
template:`{{num}}
`,
data() {
return {
num: 100
}
},
methods: {
inclick() {
// 在原生中想要拿到num数据需要
// document.querySelector(".counter");
// vue中标签中的数据已经和data中的数据实现了绑定
// 所以直接可以用this.打点即可处理data中的数据
this.num++
},
declick() {
this.num--
}
}
}).mount('#app')
</script>
MVC模型和MVVC模型
- MVC模型
MVC模型是在前期被使用较多的框架的架构模式
model可以是本地定义的数据或者从服务器请求的数据 - MVVM模型
MVVM模型是目前非常流行的架构模式
通常情况下，我们也经常称vue是一个MVVM的框架
vue官方其实有说明，vue虽然并没有完全遵守MVVM的模型，但是整个设计是受到它的启发的
view和model之间为什么莫名其妙就可以实现数据绑定呢？
因为有一个黑盒子（vue，view model）进行了处理
3、通过npm包管理工具安装使用它
4、直接通过vue cli创建项目，并且使用它
template的写法
template属性：表示的是vue需要帮助我们渲染的模板信息 目前我们看到它里面有很多的HTML标签，这些标签会替换掉我们 挂载到的元素（比如id为app的div）的innerHTML
<!-- 所以此处的“哈哈哈哈”不会显示，因为挂载内容会被template先进行清空，然后通过template属性再进行内容的替换 -->
<div id="app">哈哈哈哈</div>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
template:'啦啦啦',
data() {
return {
num: 100
}
}
}).mount('#app')
</script>
但是这个template属性模板的写法有点过于别扭了 且没有代码提示，影响编程效率 所以vue提供了六中方法书写提高效率： 方式一：使用script标签，并且标记它的类型为x-template 方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置ID
- 方式一
如果字符串是以#开始，那么它将被用作querySelector，并且使用匹配元素的innerHTML作为模板字符串
即会类似的执行：document.querySelect(’#why’) 进行元素的查找
<div id="app">哈哈哈哈</div>
<script type="x-template" id="why">
<h2 class="counter">{{num}}</h2>
<button class="increment" @click="inclick">+1</button>
<button class="decremnet" @click="declick">-1</button>
</script>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
// 此处的#why是以#开头的，所以他将被用作querySelector
// 并且使用匹配元素的innerHTML作为模板字符串
template:'#why',
data() {
return {
num: 100
}
},
methods: {
inclick() {
this.num++
},
declick() {
this.num--
}
}
}).mount('#app')
</script>
- 方式二
<div id="app">哈哈哈哈</div>
<!-- template不是vue特有的，而是HTML中定义的
但是默认template里面的内容是不会被浏览器渲染的
那么不能被解析，里面的内容怎么办？
答：template里面的内容是用来被javaScript源代码读取的
而且其实此处将template换成div也是可以的
因为本质只是用来被js解析：document.querySelect('#why') -->
<!-- template标签在真正使用中并不会被渲染 -->
<template id="why">
<div>
<h2 class="counter">{{num}}</h2>
<button class="increment" @click="inclick">+1</button>
<button class="decremnet" @click="declick">-1</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.createApp({
// 此处的#why是以#开头的，所以他将被用作querySelector
// 并且使用匹配元素的innerHTML作为模板字符串
template:'#why',
// data--- 在vue.2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）
// 在vue3.x的时候，一定传入一个函数，否则就会直接在浏览器中报错
data() {
return {
num: 100
}
},
// 官方推荐总结：不要在methods函数中使用箭头函数
// 因为箭头函数绑定了父级作用域的上下文，所以this将不会指向组件实例，即为undefined
// methods里面如果使用箭头函数话，此时的this将会指向window
methods: {
inclick:() => {
this.num++
console.log(this)
},
declick() {
this.num--
}
}
}).mount('#app')
</script>
调试vue源码
在GitHub上搜索vue-text（即为vue3源码）
然后直接下载zip文件或者通过git clone 地址进行克隆
注：下载zip文件的话需要在cmd窗口进行依赖的下载— npm install