Vue2部分

数据绑定

Vue中的数据绑定有以下两种方式:

单向绑定(v-bind): 数据只能从data流向页面,当data中被绑定变量的内容改变时,这种改变会实时展示在页面上。
双向绑定(v-model): 数据在data和页面之间双向流通。

双向绑定一般都应用在表单元素上(input,select等)

v-model:value 可以简写成v-model,因为v-model默认收集的就是value值

响应式数据原理

在vue2中，响应式数据的实现原理是通过Object.defineProperty()来实现对数据读取和修改的拦截（数据劫持），实现了响应式数据的功能。

因此，根据这个实现原理，对象等引用类型数据在如下情况下不会触发页面的更新：

向对象中新增或者删除属性，界面不会更新（直接新增或者删除不会被get和set所拦截）；
直接通过下标修改数组，界面不会更新（直接使用下标修改也不会被拦截）。

当然有如下的解决办法：

// 在obj对象添加一个新的属性
this.$set(obj, 'key', value);

// 当然还可以调用Vue下的方法：
Vue.set(obj, 'key', value);

// 在obj对象中删除一个属性
this.$delete(obj, 'key');

// 当然还可以调用Vue下面的方法：
Vue.delete(obj, 'key');

// 数组List使用如下方法进行修改，实现响应式:
this.$set(List, index, value);

// 或者调用List自身的splice方法修改第index个元素：
List.splice(index - 1, index, value);

事件

事件处理

Vue主要使用v-on 监听事件,调用相应函数对用户的交互作出回应。
以下为事件处理的基本要点:

使用v-on:xxx或@xxx来绑定事件,其中xxx 是事件名
事件的函数需要配置在methods对象中,最终在vm上
methods对象中的函数都在Vue的管理之下,因此函数中的this 指向的是vm或组件的实例对象
@click="demo"和@click="demo($event)"效果一致,但是后者可以传参

事件修饰符

Vue中的事件修饰符:

.prevent: 阻止默认事件;
.stop: 阻止事件冒泡;
.once: 事件只触发一次;
.capture: 使用事件的捕获模式;
.self: 只有event.target是当前操作的元素时才能触发事件;
.passive: 事件默认立即执行,无需等待事件回调执行完毕;

前三个事件修饰符是常用的,可以重点记一下。

Vue中常用的按键别名

回车: enter
删除: delete(捕获”删除”和”退格”)
退出: esc
空格: space
换行: tab(必须配合keydown使用)
上: up
下: down
左: left
右: right

Vue中的系统修饰键:ctrl,alt,shift,meta

配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,才会触发绑定事件
配合keydown使用: 正常触发绑定事件

Vue中未提供别名的按键,可以使用按键原始的key值去绑定,格式为kebab-case(短横线命名)

Vue3

与vue2不同，vue3不会对非响应式数据的变化对界面进行任何修改；假如说我们展示在界面上的数据会出现变化，且我们希望这种变化实时体现在界面上，则需要我们使用特定的函数来将数据设置成响应式数据。

vue3响应式原理

ref函数

在vue3中，你可以通过ref函数把普通的变量设置为响应式数据：

使用ref设置基本类型数据：

// set changeable value with ref()
const name = ref("takune");

// change the changeable value like this
name.value = "takuru";

使用ref设置引用类型数据：

// set changeable object with ref()
const info = ref({
  name: "takune",
  age: 21
});

// change the changeable object like this
info.value.name = "takuru";
info.value.age = 22;

ref实现响应式的原理

通过如上的代码可以知道ref可以将基本数据类型和引用类型的数据设置为响应式数据,下面我们将介绍其实现原理：

基本数据类型：将我们传入的基本数据封装成一个引用实现的实例(reference implement)，通过重写Object.defineProperty()中的get和set方法来实现数据劫持，更新数据
引用类型数据：实际上是借助了vue3中的reactive()函数来实现的，详细原理见reactive()部分。

reactive函数

reactive()函数可以把一个引用类型数据设置为响应式数据。

// set changeable object with ref()
const info = reactive({
  name: "takune",
  age: 21
});

// change the changeable object like this
info.name = "takuru";
info.age = 22;