一、vue3初体验
vue3 初体验
一、邂逅vue3和vue3开发体验
1、课程内容：基础——源码——实战
2、国外：react 用的更多
国内：vue 用的更多
3、什么语言更容易找工作？
后端：优先java,其次是go,再次是node,c++
前端：优先 js（ts）,其次flutter,再次android,ios
其他：游戏开发，人工智能，算法工程师
前端要求：vue,小程序
4、vue3是兼容vue2的，直接学习vue3就可以
5、2020年9月19号vue3发布
6、vue3的变化:
1)、源码通过monorepo的形式来管理代码：
mono；单个
repo: repository 仓库
主要是将许多项目的代码存储在同一个repository中
这样做的目的是多个包本身相互独立，可以拥有自己的功能逻辑，
单元测试等，同时又在同一个仓库下方便管理，
这样模块化分的更加清晰，可维护性，可扩展性更强
2)、源码使用 ts 来进行重写：
在vue2时，vue使用flow来进行类型检测
在vue3时，vue的源码全部都使用ts来进行重构，
3)、使用proxy 进行数据劫持：
在vue2时，使用Object.defineProperty劫持数据的getter和setter方法
缺陷：当给对象添加或者删除属性时，是无法劫持和监听的
所以在vue2中，不得不提供一些特殊的api,
eg：$set 或 $delete,事实上都是一些hack方法，也增加了开发者学习新的api的成本
在vue3时，使用proxy来实现数据的劫持
4)、删除了一些不必要的API:
移除实例上的$on, $off, $once
移除了一些特性： filter 、 内联模板等
5)、编译方面的优化：
生成Block Tree、 Slot 编译优化， diff算法优化
6)、由Options API 到 Composition API：
在vue2 ，使用 Options API 描述组件对象
Options API 包括：data，props,methods, computed，生命周期等
存在的问题：多个逻辑可能是在不同的地方：
eg: created 中会使用某个一method来修改data的数据，代码的内聚性非常差
Composition API可以将相关的代码 放到同一处 进行处理，而不需要在多个Options之间寻找
7)、Hooks 函数增加代码的复用性：
在vue2中，通过 mixins 在多个组件之间共享逻辑
缺陷：mixins 也是由一大堆的Options组成的，并且多个mixins会存在命名冲突的问题
在vue3中，可以通过Hooks函数，将一部分独立的逻辑抽取出去，并且它们还可以做到响应式的
7、如何使用？
方式一：cdn 引入
cdn的理解：
<body>
<div id = "app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const why = {
template:"<h2>helloworld</h2>"
}
const app = Vue.createApp(why);
app.mount("#app");
</script>
</body>方式二：下载vue的js文件 ，并手动引入
<body>
<div id = "app"></div>
<script src="./js/vue.js"></script>
<script>
Vue.createApp({
template:"<h2>你好呀嘻嘻</h2>"
}).mount("#app");;
</script>
</body>方式三: npm
方式四：vue-cli 创建项目使用
8、什么是CDN?
CDN 内容分发网络，
指通过互相连接的网络系统，利用最靠近每个用户的服务器。
更快，更可靠地将 音乐，图片，视频，应用程序及其他文件发送给用户
来提供高性能，可扩展性及低成本的网络内容传递给用户
9、计数器案例 原生 js 实现和 vue 实现
原生js实现
<body>
<h2 class = "counter">0</h2>
<button class = "increatement">+1</button>
<button class = "decreatement">-1</button>
<script src="./js/vue.js"></script>
<script>
// 获取元素
let counterEl = document.querySelector(".counter")
let increatementEl = document.querySelector(".increatement")
let decreatementEl = document.querySelector(".decreatement")
// 定义变量
let counter = 0;
counterEl.innerHTML = counter;
// 绑定事件
increatementEl.addEventListener("click",function(){
counter ++;
counterEl.innerHTML = counter;
})
decreatementEl.addEventListener("click",function(){
counter --;
counterEl.innerHTML = counter;
})
</script>
</body>vue实现
<body>
<div id="app"></div>
<script src="./js/vue.js"></script>
<script>
Vue.createApp({
template:`
<h2>{{counter}}</h2>
<button @click = "increatement">+1</button>
<button @click = "decreatement">-1</button>
`,
data:function(){
return {
counter:0
}
},
methods: {
increatement(){
this.counter++;
},
decreatement(){
this.counter--;
}
}
}).mount("#app")
</script>
</body>10、声明式编程，命令式编程
不同维度的划分方式：
编程范式：
命令式编程 （jq)：关注点 how to do
声明式编程（vue,react)：关注点 what to do,由框架（机器）完成how的过程
编程范式：
函数式编程
面向对象编程
11、软件体系结构
MVC 原生
MVVM vue
12、template
vue需要帮助我们渲染的模板信息
template里面有很多html标签，这些标签会替换掉我们挂载的元素的innerHTML
这种模板过于别扭，IED很有可能没有任何提示
vue提供了两种方式：
方式一：使用script标签，类型为x-temmplate；
方式二：使用任意标签（通常使用template标签，因为不会被浏览器渲染），设置 id
template 不是vue特有的，是html本身就有定义过的。
默认里面的东西不会被浏览器渲染，就是用来被js代码读取的
13、data属性
data属性是传入一个函数，并且该函数需要返回一个对象【vue3 ，data必须传入一个函数，否则报错】
data中的对象会被Vue响应式系统劫持，之后对该对象的修改和访问都会在劫持中被处理
14、methods
声明的方法可以直接通过组件实例访问，或者在模板语法表达式中使用。所有的方法都会将它们的 this 上下文自动绑定为组件实例，即使在传递时也如此。
在方法中可以使用this关键字来直接访问data中返回的对象属性
思考题：
问：为什么不能使用箭头函数来定义method 函数（官方文档有给出解释）？
答：在声明方法时避免使用箭头函数，因为它们不能通过 this 访问组件实例。
问：在不使用箭头函数的情况下，this指向什么？【面试题】
答：proxy
15、vue 源码
如何查看源码，git 搜索vue-next(vue3) 选择tag稳定版本，git clone
yarn dev
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)