基本概念

script部分

export default对象的属性：

• name：组件的名称
• components：存储<template>中用到的所有组件
• props：存储父组件传递给子组件的数据
• watch()：当某个数据发生变化时触发
• computed：动态计算某个数据
• setup(props, context)：初始化变量、函数
• ref定义变量，可以用.value 属性重新赋值
• reactive定义对象，不可重新赋值
• props存储父组件传递过来的数据
• context.emit()：触发父组件绑定的函数

ref

ref 的作用就是将一个原始数据类型（primitive data type）转换成一个带有响应式特性的数据类型

ref 的值在 JS/TS 中读取和修改时，需要使用 .value 获取，在模版中读取是，不需要使用 .value

reactive

用来创建响应式对象，它接收一个对象/数组参数，返回对象的响应式副本，当该对象的属性值发生变化，会自动更新使用该对象的地方。

不需要使用 .value

computed

computed 是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed 的值在 getter 执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用 getter 来计算最新的结果

computed 设计的初衷是为了使模板中的逻辑运算更简单, 比如在 Vue 模板中有很多复杂的数据计算的话, 我们可以把该计算逻辑放入到 computed 中去计算

TIP

computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当属性值没有发生改变时, 多次访问 computed 计算属性会立即返回之前缓存的计算结果, 而不会再次执行 computed 中的函数。但是 methods 方法中是每次调用, 都会执行函数的, methods 它不是响应式的

watch

watch 是 vue 内部提供的一个用于侦听功能的更通用的方法，侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数

vue 官方文档解释当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法

参数:

• 监听变量
• 回调函数
• 选项
  • immediate: boolean 第一次是否执行
  • deep: boolean 监听对象的属性

template部分

• <slot></slot>：存放父组件传过来的children。
• v-on:click或@click属性：绑定事件
• v-if、v-else、v-else-if属性：判断
• v-for属性：循环，:key循环的每个元素需要有唯一的key
• v-bind:或:：绑定属性

style部分

• <style>标签添加scope属性后，不同组件间的 css 不会相互影响。

第三方组件

• view-router包：实现路由功能。
• vuex：存储全局状态，全局唯一。
• state: 存储所有数据，可以用modules属性划分成若干模块
• getters：根据state中的值计算新的值
• mutations：所有对state的修改操作都需要定义在这里，不支持异步，可以通过$store.commit()触发
• actions：定义对state的复杂修改操作，支持异步，可以通过$store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。
• modules：定义state的子模块