【Vuejs】802- 如何差別 Vue2 和 Vue3 ？

作者：王立發

1​​

1. Vue 3 的 Template 支援多個根标簽，Vue 2 不支援

2. Vue 3 有 createApp()，而 Vue 2 的是 new Vue()

   createApp(元件)，new Vue({template, render})

3. v-model代替以前的v-model和.sync

   vue3中v-model的用法

要求:

3.1. props屬性名任意，假設為x

3.2. 事件名必須為"update:x"

效果：

<Switch :value="y" @update:value="y=$event"/>
vue2中的寫法
<Switch :value.sync="y"/>
vue3中的寫法
<Switch v-model:value="y"/>      

4. context.emit

新增context.emit，與this.$emit（vue3中隻能在methods裡使用）作用相同

• context.emit用法

import {SetupContext } from 'vue'
setup(props: Prop, context: SetupContext) {
    const toggle = () {
      context.emit('input', !props.value)
    }
    return {toggle}
}      

5. Vue3中的屬性綁定

預設所有屬性都綁定到根元素

使用​​

​inheritAttrs: false可以取消預設綁定​

​​使用attrs或者context.attrs擷取所有屬性

使用v-bing="$attrs"批量綁定屬性

使用 const {size, level, ...rest} = context.attrs 将屬性分開

5.1 使用場景

在vue2中我們在父元件綁定click事件，子元件必須内部觸發click，而vue3中在父元件綁定子元件的根元素上也會跟着綁定

• ButtonDemo.vue

<div>
    <Button @click="onClick" @focus="onClick" size="small">你好</Button>
  </div>
setup() {
      const onClick = () => {
        console.log("aaa")
      }
      return {onClick}
    },      

• Button.vue

<template>
  <div>
    <button>
      <slot/>
    </button>
  </div>
</template>      

上面的代碼Button的click事件會在根元素div上綁定，如果我們要指定click的區域為button元素的話我們就需要使用inheritAttrs

• Button.vue

<template>
  <div>
    <button v-bind="$attrs">
      <slot/>
    </button>
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false
  }
</script>      

如果想要一部分屬性綁定在button上一部分在div上就需要在setup裡

• Button.vue

<template>
  <div :size="size">
    <button v-bind="rest">
      <slot/>
    </button>
  </div>
</template>
<script lang="ts">
  import {SetupContext} from 'vue'
  export default {
    inheritAttrs: false,
    setup(props: any, context:SetupContext ) {
      const {size, ...rest} = context.attrs
      return {size, rest}
    }
  }
</script>      

6.slot具名插槽的使用

vue2中的用法

子元件

<slot name="title">      

父元件

<template slot="title">
  <h1>哈哈哈</h1>
</template>      

vue3中子元件用法不變，父元件需要使用​

​v-slot:插槽名​

​

父元件

<template v-slot:title>
  <h1>哈哈哈</h1>
</template>      

7. Teleport傳送門元件

<Teleport to="body">
  需要傳送到body下面的内容
</Teleport>      

8. vue3中動态挂載元件的方法

通過引入h函數第一個參數是元件，第二個是元素的屬性(第一個參數元件的props，也就是直接可以在使用元件的時候傳入的屬性)，第三個是插槽的屬性。

其中我們在render裡監聽我們v-model綁定的update事件的時候，需要使用​​

​onUpdate:屬性名​

​

import {createApp, h} from 'vue'
import Dialog from './Dialog.vue'
export const openDialog = (options: Options) => {
  const {title, content} = options
  const div = document.createElement('div')
  document.body.append(div)
  const app = createApp({
    render() {
      return h(Dialog, {
        visible: true, cancel: () {},
        'onUpdate:visible': (newValue: boolean) => {
          if (newValue === false) {
            app.unmount(div)
          }
        }
        }, {title, content})
    }
  })
  app.mount(div)
}      

9. 父元件裡擷取子元件内容，渲染子元件

在父元件的setUp裡通過​

​context.slots.default()​

​​拿到子元件數組，然後通過component元件渲染

比如：

• TabsDemo.vue

<Tabs>
    <Tab title="導航1">内容1</Tab>
    <Tab title="導航2">内容2</Tab>
</Tabs>      

• Tabs.vue

<template>
  <component v-for="(tab, index) in defaults" :key="index" :is="tab"></component>
</template>
<script lang="ts">
import {SetupContext} from 'vue'
export default {
  setup(props, context: SetupContext) {
    const defaults = context.slots.default()
    return {
      defaults
    }
  }
}
</script>      

vue3中所有的元件最後都會導出一個對象這個對象就是我們的子元件裡的type（context.slots.default()[0].type),是以我們可以通過type判斷子元件是不是我們要求的子元件，以Tabs元件為例我們需要使用者使用的時候下面的子元件全部都是我們的Tab元件

• Tabs.vue

import Tab from './Tab.vue'
export default {
  setup(props, context: SetupContext) {
    const defaults = context.slots.default()
    defaults.forEach(tag {
      if (tag.type !== Tab) {
        throw new Error('Tabs 子标簽必須是 Tab')
      }
    })
    return {
      defaults
    }
  }
}      

10. vue3中ref的使用

10.1.單個ref

<script>
import {
  onMounted,
  ref,
} from 'vue';

export default {
  setup() {
    const headline = ref(null);

    // Before the component is mounted, the value
    // of the ref is `null` which is the default
    // value we've specified above.
    onMounted(() {
      // Logs: `Headline`
      console.log(headline.value.textContent);
    });

    return {
      // It is important to return the ref,
      // otherwise it won't work.
      headline,
    };
  },
};
</script>

<template>
  <div>
    <h1 ref="headline">
      Headline
    </h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>      

10.2. v-for裡的ref

<template>
  // el目前元素，divs是存儲每個元素的數組
  <div v-for="(item, index) in list" :ref="el => { divs[index] = el }">
    {{ item }}
  </div>
</template>

<script>
import {
  onMounted,
  ref,
} from 'vue';

export default {
  setup() {
    const divs = ref([]);

    onMounted(() => {
      console.log(divs.value)
    });

    return {
      divs
    };
  },
};
</script>      

11. watchEffect用來代替生命周期裡的onMounted和onUpdated

初始化頁面的時候watchEffect裡的代碼會執行，當watchEffect裡的資料有更新的時候同樣會執行

const count = ref(0)

watchEffect(() console.log(count.value))
// -> logs 0

setTimeout(() {
  count.value++
  // -> logs 1
}, 100)      

注意watchEffect第一次運作是在元件挂載之前，如果需要通路DOM需要将我們的watchEffect放在onMounted裡

onMounted(() {
  watchEffect(() console.log(count.value))
})