Vue3系列第二讲——基础用法

Vue3系列第二讲——基础用法

组合API

computed函数

computed函数，是用来定义计算属性的，计算属性不能修改。(计算属性其实和Vue2.x中的computed很相似，唯一的区别是Vue3.x中的计算属性可以直接在template中使用，而Vue2.x中的计算属性需要通过v-bind的方式来使用。)

// 定义一个计算属性
const count = computed(() => {
  return this.a + this.b
})

// 在template中使用计算属性
<p>计算属性的值是: {{ count }}</p>

watch函数

watch函数，是用来监听某个数据的变化，当数据变化时，执行某个函数。(Vue3.x中的watch函数和Vue2.x中的watch函数很相似，唯一的区别是Vue3.x中的watch函数不需要使用deep参数来实现深度监听。)

// 监听a和b的变化，当a和b变化时，执行某个函数
watch([() => this.a, () => this.b], () => {
  // 执行某个函数
})

setup函数

setup函数，是Vue3.x中引入的一个新特性，它替代了Vue2.x中的生命周期函数。(Vue3.x中，所有与生命周期相关的方法，都应该在setup函数中定义。)

// setup函数
const setup = () => {
  // 在setup函数中定义数据
  const a = ref(0)
  const b = ref(0)

  // 在setup函数中定义计算属性
  const count = computed(() => {
    return a.value + b.value
  })

  // 在setup函数中定义监听器
  watch([() => a.value, () => b.value], () => {
    // 执行某个函数
  })

  // 在setup函数中返回一个对象
  return {
    a,
    b,
    count
  }
}

template模板

template模板，是用来定义Vue组件的结构。(Vue3.x中的template模板和Vue2.x中的template模板很相似。)

<!-- template模板 -->
<template>
  <div>
    <h1>这是个标题</h1>
    <p>这是个段落</p>
  </div>
</template>

script脚本

script脚本，是用来定义Vue组件的逻辑。(Vue3.x中的script脚本和Vue2.x中的script脚本很相似。)

// script脚本
<script>
export default {
  name: 'MyComponent',
  setup() {
    // 在setup函数中定义数据、计算属性、监听器等
  }
}
</script>

style样式

style样式，是用来定义Vue组件的样式。(Vue3.x中的style样式和Vue2.x中的style样式很相似。)

<!-- style样式 -->
<style>
h1 {
  color: red;
}
p {
  color: blue;
}
</style>

以上就是在本节课里为大家介绍的Vue3基本用法，希望大家能通过这些基础知识，更好地掌握Vue3的开发技巧。