vue相关语法

reactive的理解：const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象 · 响应式转换是“深层的”：会影响对象内部所有嵌套的属性

作用: 定义一个数据的响应式 · 语法: const xxx = ref(initValue), js中操作数据: xxx.value,(html)模板中操作数据: 不需要.value

toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用。利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

{{}}表达式会返回一个数据值, 肯定没有分号, 它不是完整的js的解析指令, 需要与其它语法组成一条完整的语句。 页面呈现结果: vue3.2及以上版本的语法, setup语法糖： vue2版本的语

利用ref函数获取组件中的标签元素，可以操作该标签身上的属性，还可以通过ref来取到子组件的数据，可以修改子组件的数据、调用子组件的方法等、非常方便.

v-text : 当作纯文本，更新元素的 textContent/innerText v-html : 将value作为html标签来解析， 更新元素的 innerHTML.

v-for遍历产生列表时, 每个项标签都需要有一个唯一的key值， 如果数组元素有自己的标识数据, 用它作为key值, 否则才选择下标作为key。 v-for 可以遍历数组 也可以 遍历对象。

比较v-if 与 v-show   v-if: 通过删除DOM对象来隐藏       劣势: 重新显示时需要重新创建,优势: 隐藏时不占用着内存空间.

当在同一个标签上同时使用 v-for 和 v-if 时，可能会导致意外的结果或错误。这是因为Vue的编译规则中，v-for 比 v-if 优先级更高，意味着 v-for 会先执行。

在应用界面中, 某个(些)元素的样式是变化的   class/style绑定就是专门用来实现动态样式效果的技术

v-bind 指令用于将一个表达式的值动态地绑定到目标元素的属性上。通过 v-bind，我们可以实现将 Vue 实例的数据或表达式的值绑定到 HTML 属性的功能。

v-on 是 Vue中用于绑定事件的指令。它可以绑定许多不同的事件，如： click：鼠标点击事件 input：输入框内容变化事件 keydown：按键按下事件 keyup：按键松开事件 submit

v-model 是 Vue 中一个常用的指令，用于实现表单元素与数据的双向绑定。 它的实现原理主要基于以下两个方面： 语法实现：是 Vue 对 :value 和 @input 两个属性的语法糖。

vue中的v-model是双向绑定的, 我们自己用js实现一个双向绑定vModel函数。 这样就完成了双向绑定了，input输入框的值变化绑定的变量也会变化， 绑定的变量值改变则input输入框的值也

1. 在computed中定义计算属性方法根据已有的数据进行计算返回一个要显示的新数据 2. 在页面中使用{{计算属性名}}来显示返回的数据 3. computed: 内部有缓存, 多处读取只计算一次

watach函数：   监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调   默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次   

Vue.js 2.x 生命周期钩子： beforeCreate： 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

setup 是新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次 · 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用。