vue2.x 学习进阶

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

计算属性缓存 vs 方法

计算属性：

computed: {
  // 计算属性的 getter
  reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
  }
}

方法：

// 在组件中
methods: {
  reversedMessage: function () { returnthis.message.split('').reverse().join('') }
}

上述两种方式的最终结果确实是完全相同的。

然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性是只读的

侦听器

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

异步操作的出发也可以在绑定的事件里，也可以使用监听某个值的方式

绑定 HTML Class

方式一：直接输入class name

<div
  class="static"
></div>

方式二：设置class name : true/false 动态添加

<div
  v-bind:class="{
 }"
>
</div>

// 也支持一起设置
<div
  class="static"
  v-bind:class="{active: isActive, 'text-danger': hasError}"
>
</div>

方式三：设置class name Array 动态添加

<div v-bind:class="[isActive ? activeClass : '', errorClass]">
</div>

绑定内联样式

方式一：直接输入style 内容

<div
  style="color:#000"
></div>

方式二：对象语法

<div
  v-bind:style="{
    color: activeColor,
    fontSize: fontSize + 'px'
 }"
>
</div>

方式三：将多个样式对象应用到同一个元素上

<div v-bind:style="[basicClass, activeClass]">
</div>

通过插槽分发内容

动态切换组件

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

<!-- 组件会在currentTabComponent改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

• 已注册组件的名字，或
• 一个组件的选项对象

解决元素限制

<table> 
  <tr is="blog-post-row"></tr> 
</table>

Slot

基础用法

// 它允许你像这样合成组件：
<navigation-link url="/profile">
  Your Profile
</navigation-link>
 
 
// 然后你在 <navigation-link> 的模板中可能会写为：
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

编译作用域

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，而不能访问 <navigation-link> 的作用域。

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

让user 在父级的插槽内容中可用：
子组件：将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父组件：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

具名插槽

slot上取个名字：<slot name=xxx></slot>

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
   <slot name="footer"></slot>
  </footer>

</div>

使用：声明要插入的内容v-slot:xxx

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
 
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

自定义组件v-model【新】

自定义组件接受一个prop的值，当触发一个事件的时候为了保证组件内部逻辑，需要修改prop上的值。如果直接赋值，控制台会报一个⚠️。

那么如何既能接收prop的值，又能在组件内部更新这个值呢？

vue3中的改动：https://vue3js.cn/docs/zh/gui...