Vue模板知识点

作者山风的成长日记

2025年1月17日 22:11

前言

Vue的两大特征是模板化、组件化。模板的优点是提高开发效率，按照规定的结果书写代码就能够快速完成页面开发。缺点也很明显，就是固定的模板结构牺牲了一定的灵活性，Vue提供了一系列的API来增加模板的灵活性。

一、动态数据

Mustache

 <template>
   <span>{{msg}}</span>
   <span>{{count > 99 ? 99: count}}</span>
 </template>

Mustache不仅支持数据、还支持method、computed、逻辑运算等。这是因为Vue在解析模板的时候会对Mustache里面的内容进行判断，包装成不同的解析函数，如果是数据直接返回，如果是逻辑运和函数则取运算结果。

computed和watch

思想上，computed注重运算结果，watch注重过程。watch直接进行拦截监听，数据变化时运行一些逻辑，computed则需要先进行依赖收集，对依赖进行监听，当依赖发变化的时候触发重新计算。computed是vue自发的进行依赖的收集监听。并在依赖变化时执行对应的渲染函数触发视图的更新，而watch则可以添加更多开发者自定义的逻辑。

特点：computed自发的，不可以控制，watch灵活可控，wathch有immediate、once、deep等。

<template>
 <div>选择了{{ choose }}件商品</div>
 <div>总价是:{{ totalPrice }}</div>
 <button @click="addChoose">add</button>
</template>

<script>
export default {
 name: "App",
 data() {
   return {
     choose: 0,
     price: 19.9,
   };
 },
 methods: {
   addChoose() {
     this.choose++;
   },
 },
 computed: {
   totalPrice() {
     return this.choose * this.price;
   },
 },
 watch: {
   choose(newVal, oldVal) {
     console.log(`choose从${oldVal}变成了${newVal}`);
   },
 },
};
</script>

watch中使用deep、immediate、once

  watch: {
   goodsInfo: {
     handler(newVal, oldVal) {},
     deep: true, // 深度监听，监听子属性
     immediate: true, // 初次赋值的时候也触发监听回调
     once: true, // 只监听一次
   },
 },

二、动态结构(slot)

插槽: 父组件定义结构，子组件指定结构的位置。插槽分为三种：

默认插槽
具名插槽
作用域插槽

2.1 默认插槽

// 父组件
<template>
 <HelloWorld>
   <span>这是传递给子组件的默认插槽</span>
 </HelloWorld>
</template>

<script>
import HelloWorld from "./HelloWorld";
export default {
 name: "App",
 components: {
   HelloWorld,
 },
};
</script>

// 子组件
<template>
 <div class="child-component">
   <slot></slot>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
};
</script>

2.2 具名插槽

默认插槽只能定义一个结构，如果想定义多个结构就要使用具名插槽。其中v-slot:header可以缩写为#header。

// 父组件
<template>
 <HelloWorld>
   <template v-slot:header> <span>header</span> </template>
   <template v-slot:content> <span>header</span> </template>
   <template #footer> <span>header</span> </template>
 </HelloWorld>
</template>

<script>
import HelloWorld from "./HelloWorld";
export default {
 name: "App",
 components: {
   HelloWorld,
 },
};
</script>

// 子组件
<template>
 <div>
   <span>HelloWorld</span>
   <slot name="header"></slot>
   <slot name="content"></slot>
   <slot name="footer"></slot>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 data() {
   return {
     user: {
       name: "jack",
       age: 21,
     },
     date: Date.now(),
   };
 },
};
</script>

默认插槽只有一个所以没必要给它起名字，但实际上默认插槽也有自己的名字：default

   <slot></slot>

   // 等同于上面写法
   <slot name="default"></slot>

2.3 作用域插槽

作用域插槽也分为匿名作用域插槽和具名作用域插槽，作用域插槽就是在默认插槽和具名插槽的基础上增加了“数据”的能力，即在父组件定义的插槽结构中可以使用子组件提供的数据。

默认作用域插槽

// 父组件
<template>
  <HelloWorld v-slot:default="slotProps">
    {{ slotProps.user.name }}
    {{ slotProps.user.age }}
    {{ slotProps.date }}
  </HelloWorld>
</template>

<script>
import HelloWorld from "./HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

// 子组件
<template>
  <div>
    <slot :user="user" :date="date"></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: {
        name: "jack",
        age: 21,
      },
      date: Date.now(),
    };
  },
};
</script>

针对默认具名插槽下面的三种书写是等效的:

  <HelloWorld v-slot:default="slotProps">
    {{ slotProps.user.name }}
    {{ slotProps.user.age }}
    {{ slotProps.date }}
  </HelloWorld>

   <HelloWorld v-slot="slotProps">
    {{ slotProps.user.name }}
    {{ slotProps.user.age }}
    {{ slotProps.date }}
  </HelloWorld>

    <HelloWorld #default="slotProps">
    {{ slotProps.user.name }}
    {{ slotProps.user.age }}
    {{ slotProps.date }}
  </HelloWorld>

具名作用域插槽

// 父组件
<template>
  <HelloWorld>
    <template #user="userProps">
      {{ userProps.user.name }}
      {{ userProps.user.age }}
    </template>
    <template #date="dateProps">
      {{ dateProps.date }}
    </template>
  </HelloWorld>
</template>

<script>
import HelloWorld from "./HelloWorld";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

// 子组件
<template>
  <div>
    <slot name="user" :user="user"></slot>
    <span>content</span>
    <slot name="date" :date="date"></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      user: {
        name: "jack",
        age: 21,
      },
      date: Date.now(),
    };
  },
};
</script>

三、模板的编译过程

Vue是如何将 .vue文件渲染成html的？

对tempalte进行编译，结合依赖收集和作用域插槽，生成渲染函数。
调用渲染函数，生成虚拟dom。
将虚拟dom渲染成真实dom。

虽然在vue中可以直接写render函数，但最好还是使用vue模板，因为这更符合vue的模板理念，更重要的是vue在对模板的编译过程中做了很多优化，比如dom diff算法，事件处理，渲染函数缓存等。

使用render函数的写法如下：

<script setup>
import { h } from 'vue';
</script>

<script>
export default {
  name: 'HelloWorld',
  render() {
    return h('div', 'Hello, World!');
  }
};
</script>

普通视图

前言