模板引用在某些情况下，需要访问底层DOM元素，想要实现这一点，需要使用特殊的refattribute： <input ref="input" /> ref是一个特殊的attribute，它允许在一个特定的DOM元素或者子组件实例被挂载后，获得对它的直接引用。 访问模板引用要在组合式API中获取引用，可以使用辅助函数useTe...

Watch计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些操作，比如更改DOM，或者根据异步操作的结果去修改另一处状态。可以使用watch在状态变化时触发回调函数。 const x = ref(0)const y = ref(0)//单个refwatch(x, (newX) => { console.log(`x ...

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。 const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Ba...

v-once仅渲染元素和组件一次，并跳过之后的更新。 在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。 <!-- 单个元素 --><span v-once>This will never change: {{msg}}</span&...

v-for可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，item是迭代项的别名： const items = ref([{message: 'Foo'}, {message: 'Bar'&...

v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> v-else也可以使用v-else为v-if添加一个”else区块”。 <button @click="awesome =...

v-model在表单输入元素或者组件上创建双向绑定。 表单输入绑定在前端处理表单时，我们常常需要将表单输入框的内容同步给代码中的变量。如果手动操作的话可能会比较麻烦。 <input :value="text" @input="event => text = event.target.value" /&g...

v-bindv-bind用于动态的绑定一个或者多个attribute，也可以绑定组件的prop。可以使用:来进行缩写。 <!-- 绑定 attribute --><img v-bind:src="imageSrc" /><!-- 动态attribute名 --><button v-bind:[ke...

内容渲染指令v-textv-text 通过设置元素的textContent属性来工作，因此它将覆盖元素中所有的内容。如果仅仅需要更新textContent的部分，应该使用模板语法的文本插值方式，即{{ }}形式。 示例: <span v-text="msg"></span>&...

为什么要使用ref自动更新DOM在模板中使用了一个ref，然后在改变了这个ref的值时，Vue会自动检测到这个变化，并且相应地更新DOM。当一个组件首次渲染时，Vue会追踪在渲染过程中使用的每一个ref。然后在任意一个ref被修改时，它会触发追踪它的组件的一次重新渲染。 如果我们使用的是普通变量，那么无法检测变量的访问或修改。但是我们可以通过getter&#...