「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」
1.全局API的转移
Vue 2.x中有许多全局API和配置
- 例如注册全局组件，注册全局指令等
-
Vue.component('',{ data:()=>({ name:'zhao' }), template:'<a>{{name}}</a>' })
Vue3.0中对api做了调整
将全局的API，即Vue.xxx调整到应用实例（app）上
| 2.x全局API（Vue） | 3.x实例API（APP） |
|---|---|
| Vue.config.xxx | app.config.xxx |
| Vue.config.producyionTip (vue提示语) | 移除 |
| Vue.component | app.component |
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use |
| Vue.prototype | app.config.globalProperties |
2.其他改变
-
vue过渡 transition 中的类名改变 Vue3.0写法
.v-enter-from,
.v-leave-to{
opacity:0;
}
.v-enter-from,
.v-leave-to{
opacity:1;
}
移除keyCode作为v-on的修饰符，
移除v-on.native修饰符
父组件中绑定事件
<sun v-on:close="hand" v-on:click="hands" ></sun>子组件中声明自定义事件
export default { emits:['close'], }
移除过滤器（filter）
总的来说vue3的新特性可以包括以下几点：
Performance：性能优化
Tree-shaking support：支持摇树优化
Composition API：组合API
Fragment，Teleport，Suspense：新增的组件
Better TypeScript support：更好的TypeScript支持
Custom Renderer API：自定义渲染器
以上就是Vue3的全部新特性，接下来 我们来看看MVVM和MVC框架区别：
MVC模式
-
视图（View）
接收用户的动作，传递指令给Controller
-
控制器（Controller）
控制器根据用户动作进行业务逻辑，要求模型进行改变。
-
模型（Model）
Model层将新的数据发送给View，用户得到反馈，模型层用于存储视图层展示的数据
MV-VM模式
View层用来接收用户请求，（DOM操作，Ajax等。）
ViewModel监听View层请求状态的变化和Model层数据的变化
ViewModel和Model之间进行双向数据绑定，Model层监听ViewModel的变化
MVC和MVVM的本质区别
MVC
MVC模式数据是单向通信，遵循View(视图)->controller(控制器)->Model(模型)->View(视图)
MVVM
Model不能直接操作View层
数据可以双向通讯
Controller层 修改为ViewModel层（视图模型）
- View层用来接收用户请求(DOM事件、 Ajax等)
- ViewModel监听View层请求状态的变化和Model层数据状态的变化
- ViewModel和Model之间进行数据双向绑定，Model层 监听ViewModel的变化- MVC和MVVM本质区别
- MVC模式，数据是单向通信，
- 遵循View -> Controller -> Model -> View方向-
- MVVM模式，数据可以双向通信
在这里，需要提一下，Vue3.2版本已经发布。
在Vue的日志中这样写到：
Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。
3.新的单文件组件功能
<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。
<style> v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style>
起初 vue3.0 暴露变量必须 return 出来，template中才能使用
<script>
import A from './AAA.vue'
import B from './BBB.vue'
export default {
setup (props) {
return {
well: Math.random(),
A,
B
}
}
}
</script>
这是一起使用这两个新功能的示例组件：
<script setup>
import { ref } from 'vue'
const color = ref('red')
</script>
<template>
<button @click="color = color === 'red' ? 'green' : 'red'">
Color is: {{ color }}
</button>
</template>
<style scoped>
button {
color: v-bind(color);
}
</style>
目前现在这里介绍Vue3.2中这一种新写法，在3.2中更新不太多，所以也很好学习和掌握~
