[前端开发工程师]工作小记——Vue3开发(一)

Vue组件书写风格

选项式API

用包含多个配置项的对象来描述组件的逻辑，把描述组件的属性拆分到不同配置项中。优点是配置项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例，且配置项不用引入声明；缺点是代码组织性差，不便阅读。

设计思想：以“组件实例”的概念为中心 

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

---

组合式API

使用导入的 API 函数来描述组件逻辑，将同一个逻辑关注点相关代码收集在一起将能使开发人员更容易阅读和理解。

设计思想：直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。

setup

组合式API的入口，在 setup() 函数中返回的对象会暴露给模板和组件实例

函数有两个参数，分别是 props 、context，props存储着定义当前组件允许外界传递过来的参数名称以及对应的值；context是一个上下文对象，能从中访问到 attr 、emit 、slots

<script>
import { ref } from 'vue'
​
export default {
  setup() {
    const count = ref(0)
​
    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },
​
  mounted() {
    console.log(this.count) // 0
  }
}
</script>
​
<template>
  <button @click="count++">{{ count }}</button>
</template>

在模板中访问从 setup 返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写 .value。

setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。

---

<script setup> 语法糖

当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用；

代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同，<script setup> 中的代码会在每次组件实例被创建的时候执行。

方法

import 导入的内容会直接暴露，这意味着我们可以在模板表达式中直接使用导入的函数，而不需要通过 methods 选项来暴露它。

组件

<script setup> 范围里的值也能被直接作为自定义组件的标签名使用；动态组件使用:is绑定

<script setup>
import { ref, onMounted } from 'vue'
import MyComponent from './MyComponent.vue'
import Bar from './Bar.vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
  <MyComponent />
  <component :is="Bar" />
</template>

ref（）

ref( )接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value

reactive（）

返回一个对象/数组的响应式代理，可以直接访问和修改对象或数组的属性或元素。

赋值问题

直接给reactive声明的变量本身赋值是没有效果的

对象赋值

• 再嵌套一层

const props = defineProps({
  data:{
    type: Object,
    default: {}
  }
})

const modalData = reactive({
  data:{}
})

modalData.data = { ...props.data }

• 单个赋值

let formData = reactive({
  updateDate: null
})

formData.updateDate = '2023-7-10'

function reset() {
	formData.updateDate = null
}

数组赋值

• 使用ref声明

cosnt state = ref([]);
state.value = [1,2,3];

• 再嵌套一层

const state = reactive({
    arr: []
});
state.arr = [1,2,3];

• 循环赋值

const arr = reactive([]);
arr.push(...[1,2,3])