我们都知道，Vue 是一套用于构建用户界面的渐进式框架，是目前前端领域主流框架之一，作为前端框架，它有两大核心：

1. 数据双向绑定：当数据发生改变，视图可以自动更新，可以不用关心 dom 操作，而专心数据操作；
2. 可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试。

Vue 从之前的 1 版本到现在基本所有公司都用到的 2 版本经历了一次重大变革，到 2020 年 10 月 5 日，Vue3 的源码正式发布。3 版本的发布其中比较变化大的一个点就是 Vue 的数据双向绑定的原理发生了变化，那么我们知道，** 数据双向绑定的原理在前端的面试中基本上是必问的，可见其重要性。** 那么接下来我们着重讨论一下 Vue2 和 Vue3 版本的数据双向绑定原理的区别及其各自的优缺点。

# 前言

最近跨标签页数据传输这类功能点比较火，因为现在跨标签同步数据共享的需求越来越多了，所以大家伙也就都探讨这类功能点的实现方式

今天我就在 Vue3 项目中，给大家演示一下纯前端如何实现跨标签通信：

1. BroadCast Channel
2. Service Worker
3. LocalStorage + onstorage
4. open + postMessage

为什么用这个，首先想要手写仓库，那么你使用的数据就必须是响应式数据，不然你改变了，页面却没有改。
而 Vue.observable 和 reactive 都是把数据变成响应式的方法

# transition-group

transition-group 是表示的一组动画，一般常配合 v-for 动态渲染使用，由于 transition 中只能是单个的元素，因此如果需要多个元素添加动画效果需要加入 transition-group 使用。

使用 el-input 的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当 el-form 表单中只有一个 input 时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。

# 解决办法:

# 方法一：

• 取消 form 、 el-form 元素，非必要 form ，换成 div

# 媒体查询两种方法:

# css 方式

@media screen and (max-width: 600px) { 

/* 当屏幕尺寸小于 600px 时，应用下面的 CSS 样式 */

  .class {

    background: #ccc;

  }

}

/* 当屏幕尺寸大于 900px 时，应用下面的 CSS 样式 */

@media screen and (min-width: 900px) {

  .class {

    background: #fff;

  }

}

Keyframe 演示动画

常用属性：

1. name: string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
2. appear: boolean，是否在初始渲染时使用过渡。默认为 false。
3. css: boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
4. type: string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
5. mode: string，控制离开 / 进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
6. duration: number | {enter: number, leave: number} 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。

---

自定义过渡类名属性：

1. enter-class: string
2. leave-class: string
3. appear-class: string
4. enter-to-class: string
5. leave-to-class: string
6. appear-to-class: string
7. enter-active-class: string
8. leave-active-class: string
9. appear-active-class: string