vue3学习

1. 官网地址：cn.vuejs.org/guide/intro…
2. vue3比较鲜明的就是组合式api, 组合式api会与

<script setup>
	import { ref, onMounted } from '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>
</template>

在这里就没有之前的export default 了，但是仍然有生命周期钩子函数onMounted之类的

4.应用实例：

每个Vue应用都是通过createApp函数创建一个新的应用实例：

import { createApp } from 'vue'
const app = createApp({})

1. 根组件：

我们传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件是子组件。如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个css选择器字符串：

<div id="app"></div>

app.mount('#app')

1. 声明响应式状态

ref(): 在组合式API中，推荐使用ref()函数来声明响应式状态：

import { ref } from 'vue'
const count = ref(0)

ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回：

const count = ref(0)
console.log(count)
console.log(count.value)

count.value++
console.log(count.value)

在模板和事件中使用ref的数值不需要.value

<div>{{ count }}</div>

dom更新时机：当你修改响应式状态时，DOM会被自动更新，使用await nextTick()等待更新完成

import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

另一个响应式api: reactive()

reactive()与将内部值包装在特殊对象中的ref不同，reactive（）将使对象本身具有响应性：

import { reactive } from 'vue'

const state = reactive({ count: 0 })

在模板中使用:

<button @click="state.count++">
  {{ state.count }}
</button>

1. 计算属性computed：

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

这里的computed里面传入一个函数

1. class与style绑定

和vue2差不多，就是定义变量的时候用ref或者reactive,然后模板里面自己解构

1. 条件渲染

v-if v-else

1. 列表渲染

v-for

1. 事件处理@click
2. 表单输入绑定

v-model, v-model是text和@input的结合

1. 生命周期钩子：

onMounted钩子函数用来在初始渲染完成后执行：

<script setup>
import {onMounted} from 'vue'
onMounted(() => {
	console.log(`the component is now mounted.`)
})
</script>

1. 生命周期图示：