Setup函数

Setup vue 3.0

setup是一个新的组件选项，作为组件中使用组合API的起点。
从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
这就意味着在setup函数中this 还不是组件实例，this此时是undefined

在模版中需要使用的数据和函数，需要在setup返回。

<template><div class="container"><h1 @click="say()">{{msg}}</h1></div>
</template>
<script>
export default {setup () {console.log('setup执行了')console.log(this)// 定义数据和函数const msg = 'hi vue3'const say = () => {console.log(msg)}return { msg , say}},beforeCreate() {console.log('beforeCreate执行了')console.log(this)}
}
</script>

总结：setup组件初始化之前执行，它返回的数据和函数可在模版使用

Setup vue 3.2

script setup 语法糖

<script setup></script>

1. 属性和方法无需返回，直接使用

在添加了setup的script标签中，我们不必声明和方法，这种写法会自动将所有顶级变量、函数，均会自动暴露给模板（template）使用 。

<template><div>// 调用方法<button @click='changeName'>name</button>  </div>
</template><script setup>
import { ref} from 'vue'const name= ref('Jerry')// 声明method方法const changeName = () => {name.value = 'Tom'}  
</script>

reactive, computed, 也一样可以使用：

<template><div>{{msg}}</div><div>{{obj.a}}</div><div>{{sum}}</div>
</template><script setup>
import { ref, reactive, computed } from 'vue'const msg = ref('hello vue3');const obj = reactive({a: 1,b: 2
})const sum = computed(() => {return obj.a + 3;
});
</script>

2. 组件自动注册

<template><Child />
</template><script setup>
import Child from '@/components/Child.vue'
</script>

组合API-父子通讯 vue3.0

父传子：

<template><div class="container"><h1>父组件</h1><p>{{money}}</p><hr><Son :money="money" /></div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {name: 'App',components: {Son},// 父组件的数据传递给子组件setup () {const money = ref(100)return { money }}
}
</script>

<template><div class="container"><h1>子组件</h1><p>{{money}}</p></div>
</template>
<script>
import { onMounted } from 'vue'
export default {name: 'Son',// 子组件接收父组件数据使用props即可props: {money: {type: Number,default: 0}},setup (props) {// 获取父组件数据moneyconsole.log(props.money)}
}
</script>

子传父：

<template><div class="container"><h1>父组件</h1><p>{{money}}</p><hr>
+    <Son :money="money" @change-money="updateMoney" /></div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {name: 'App',components: {Son},// 父组件的数据传递给子组件setup () {const money = ref(100)const updateMoney = (newMoney) => {money.value = newMoney}return { money , updateMoney}}
}
</script>

<template><div class="container"><h1>子组件</h1><p>{{money}}</p><button @click="changeMoney">花50元</button></div>
</template>
<script>
export default {name: 'Son',// 子组件接收父组件数据使用props即可props: {money: {type: Number,default: 0}},// props 父组件数据// emit 触发自定义事件的函数setup (props, {emit}) {// 获取父组件数据moneyconsole.log(props.money)// 向父组件传值const changeMoney = () => {// 消费50元// 通知父组件，money需要变成50emit('change-money', 50)}return {changeMoney}}
}
</script>

扩展：

在vue2.x的时候 .sync 除去v-model实现双向数据绑定的另一种方式

<Son :money='money' @update:money="fn"  />
<Son :money.sync='money'  />

在vue3.0的时候，使用 v-model:money="money" 即可

<Son v-model:money="money" />

总结：

父传子：在setup种使用props数据 setup(props){ props就是父组件数据 }
子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数 }
在vue3.0中 v-model 和 .sync 已经合并成 v-model 指令

组合API-父子通讯 vue3.2

因为没有了setup函数，那么props，emit怎么获取呢

setup script语法糖提供了新的API来供我们使用

defineProps

如果只是单纯在 template 里使用，那么其实就这么简单定义就可以了：

import { defineProps } from 'vue'defineProps(['name', 'userInfo', 'tags'])

如果 script 里的方法要拿到 props 的值，你也可以使用字面量定义：

const props = defineProps(['name', 'userInfo', 'tags'])console.log(props.name)

如果不显性的指定 prop 类型的话，很容易在协作中引起程序报错，所以跟我们平时定义 prop 类型时一样， Vue 会通过 instanceof 来进行类型检查。

使用这种方法，需要通过一个 “对象” 入参来传递给 defineProps，比如：

defineProps({name: {type: String,required: false,default: 'Petter',},userInfo: Object,tags: Array,
})

父传子：

<template><div class="container"><h3>我是父组件</h3><Son :name="name"></Son></div>
</template><script setup>import Son from "./Son"import {ref} from "vue"let name = ref("张三")
</script>

子组件代码：

<template><div>我是子组件{{name}} </div>
</template><script setup>import {defineProps} from "vue"defineProps({name:{type:String,default:"我是默认值"}})
</script>

defineEmits

defineEmit 也是一个方法，它接受的入参格式和标准组件的要求是一致的。

由于 emit 并非提供给模板直接读取，所以需要通过字面量来定义 emits，最基础的用法也是传递一个 string[] 数组进来，把每个 emit 的名称作为数组的 item 。

重复定义的话，事件就会不生效。

// 获取 emit
const emit = defineEmit(['chang-name'])// 调用 emit
emit('chang-name', 'Tom')

子传父：

<template><div>我是子组件{{name}}<button @click="ziupdata">按钮</button></div>
</template><script setup>import {defineEmits} from "vue"//自定义函数，父组件可以触发const em=defineEmits(["updata"])const ziupdata=()=>{em("updata","我是子组件的值")}</script>

父组件代码：

<template><div class="container"><h3>我是父组件</h3><Son @updata="updata"></Son></div>
</template><script setup>import Son from "./Son"const updata = (data) => {console.log(data); //我是子组件的值}
</script>

defineExpose

在标准组件写法里，子组件的数据都是默认隐式暴露给父组件的，但在 script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据。
如果要调用子组件的数据，需要先在子组件显示的暴露出来，才能够正确的拿到，这个操作，就是由 defineExpose 来完成。

<template><div class="list-card">这是子组件</div>
</template>
<script setup>import { defineExpose, reactive, ref } from 'vue'let sonNum = ref(0)let sonName = reactive({name: '小明'})defineExpose({sonNum,sonName})
</script>

父组件代码：

<template><List ref="sonRef"></List><button @click="getSonData">获取子组件暴漏的值</button>
</template>
<script setup>import List from '../components/list.vue'import { ref } from 'vue'const sonRef = ref()function getSonData() {console.log('子组件中ref暴漏的数值', sonRef.value.sonNum) // 子组件中ref暴漏的数值 0console.log('子组件中reactive暴漏的字符串', sonRef.value.sonName.name) // 子组件中reactive暴漏的字符串 小明}
</script>

vue指令变化

v-text，v-html，v-show，v-on，v-bind，v-slot，v-pre，v-cloak，v-once，v-is都和之前用法一样

v-if v-for 指令

vue3.0中

vue3.2中

v-memo 指令

v-memo 是一个vue3.2 新增的自定义指令，用于提升渲染性能。

记忆模板的子树（子组件或者子元素），用数组存储，被记忆的在下次虚拟dom渲染的时候如果没有发生过任何改变，则跳过这个子组件或子元素，不会触发更新渲染

<div ref="parent"  v-memo="[componentA, componentB]"><!-- 倘若被记忆的 componentA和componentB 其中一个或全部没有任何更改，则生成这个parent节点不会触发内部节点的更新--><componentA /><componentB />
<div />