Vue2和Vue3区别的理解和学习4-模板和语法

Vue2和Vue3区别的理解和学习4-模板和语法

组件定义

// vue2 
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }

vue3 --- js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}

vue3 --- ts
<script setup>
  import { ref } from 'vue'
  const count = ref(0)
  function increment() {
    count.value++
  }
</script>

生命周期钩子

以挂载完成为例

// vue2
export default {
  mounted() {
    console.log('Component is mounted!')
  }
}

vue3
import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

多个根节点

Vue 3 允许在一个组件模板中有多个根节点，而不再需要一个包裹元素。这使得组件结构更加简洁。

// vue2
<template>
  <div>
    <header>Header</header>
    <main>Main content</main>
  </div>
</template>

// vue3
<template>
  <header>Header</header>
  <main>Main content</main>
</template>

自定义指令

// vue2自定义全局指令 -- main.js文件或者其他入口文件
Vue.directive('get-div', {
  bind(el, binding) {
    console.log(el, binding);
  }
});
// html
<div v-get-div="'username'"></div>

// vue3自定义全局指令 -- main.js文件或者其他入口文件
const app = createApp(App);

// 注册全局自定义指令
app.directive('get-div', (el,binding) => {
  console.log(el,binding)
});
// html
<div v-get-div="'username'"></div>

<teleport> 组件

`将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

在vue2中，如果想实现此功能，需要下载插件来实现。
npm install vue-teleport-component --save

// vue3
<Teleport to="body">
  <div>teleport</div>
</Teleport>

to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。
上面代码的意思是’把<teleport>标签中的模板片段传送到 body 标签下。

总结

Vue 3的模板语法更具可读性，‌更便于学习和使用。‌此外，‌Vue 3 还提供了全面的TypeScript类型定义库，‌使得在TypeScript项目中使用Vue.js更加轻松。‌通过使用defineComponent函数来明确声明组件的类型，‌代码的清晰度和可理解性得到了进一步提升，‌同时也可以在编译时进行类型检查，‌从而增强了代码的安全性和可维护性