ref() //const count = ref(0) //count.value（访问值，包括对象要加.value） //任何类型的值，包括深层嵌套的对象或则JS内置数据结构
await nextTick() //要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API
reactive() //只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)它不能持有如 string、number 或 boolean 这样的原始类型
模板语法1：<span>Message: {{ msg }}</span>
模板语法2（插入HTML）：<span v-html="rawHtml"></span>
指令：<div v-bind:id="xd"></div> //常见指令 :id、:disable、:href
计算属性：（1）、import { ref, computed } from "vue"; （2）、const booksLength = computed(() => { return list.value.books.length > 0 ? "Yes" : "No"; }); （3）、 <span>{{ booksLength }}</span> // 不是以一个函数执行,不加()条件渲染：v-if、v-else、v-else-if、v-show
列表渲染：（1）、v-for（<li v-for="item in courseList">{{ item }}</li>） ；（2）、of（<li v-for="item of courseList">{{ item }}</li>）
#v-if和v-for是不推荐一起使用在同一个标签
事件监听：v-on:click="handler" 或则 @click="handler"
侦听器：watch（我们需要在状态变化时执行一些“副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态）
侦听器：watchEffect()
- 计算属性
为什么后面不加()，不是以一个函数执行
使用缓存，减少性能消耗
<script setup>
import { ref, computed } from "vue";
const list = ref({books: ["语文","数学","英语",],
});// 一个计算属性 ref
const booksLength = computed(() => {return list.value.books.length > 0 ? "Yes" : "No";
});
</script><template><p>拥有书籍的个数:</p><span>{{ booksLength }}</span>
</template>
- 可写计算属性
<script setup>
import { ref, computed } from "vue";
const firstName = ref("老");
const lastName = ref("王");const fullName = computed({// getterget() {return firstName.value + " " + lastName.value;},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(" ");},
});
// fullName.value = "范 冰冰";
</script><template><p>Has published books:</p><span>{{ fullName }}</span>
</template>
- 列表渲染
v-if和v-for是不推荐一起使用在同一个标签
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高
这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名
对象的循环便利：便利对象的值、键、索引如下：
<script setup>
import { ref } from "vue";
const courseObject = ref({ front: "js", back: "java" });
</script><template><ul><li v-for="(value, key, index) in courseObject" v-if="!value">{{ value }} - {{ key }} -{{ index }}</li></ul>
</template>
- 事件修饰符
.stop //阻止事件的向上传播,阻止上层事件的发生
.prevent //阻止行为
.self //提交事件将不再重新加载页面
.capture //添加事件监听器时，使用 `capture` 捕获模式
.once //点击事件最多被触发一次
.passive //滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成
- 按键修饰符
.enter //enter键
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
- 系统按键修饰符
.ctrl
.alt
.shift
.meta
- 表单输入绑定
（1）、没使用vue时需要手动处理双向数据绑定
<input:value="text"@input="event => text = event.target.value"
>
（2）、v-model 指令帮我们简化了这一步骤
<input v-model="text">
- 侦听器
我们需要在状态变化时执行一些“副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态
<script setup>
import { ref, watch } from "vue";const question = ref("");
const answer = ref("答案");
const loading = ref(false);// 可以直接侦听一个 ref
watch(question, (newQuestion) => {if (newQuestion.includes("?")) {loading.value = true;answer.value = "Thinking...";setTimeout(() => {answer.value = "是的";}, 1000);}
});
</script><template><p>提问问题<input v-model="question" :disabled="loading" /></p><p>{{ answer }}</p>
</template>
（1）即时回调侦听器
watch 默认是懒执行的：仅当数据源变化时，才会执行回调
watch(source,(newValue, oldValue) => {// 立即执行，且当 `source` 改变时再次执行},{ immediate: true }
)
（2）、一次性侦听器
源变化时触发一次 once: true
watch(source,(newValue, oldValue) => {// 当 `source` 变化时，仅触发一次},{ once: true }
)
watch vs. watchEffect
watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
-
watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
-
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
