当前位置：首页 > news >正文

vue组合式API及生命周期钩子函数

news 2025/6/28 1:29:37

一、组合式API

什么是组合式API？
- vue3中支持vue2的选项式、支持新的编程模式–函数式编程（没有this指针）
- 做了一个兼容，可以在一个组件中使用函数式编程和OOP编程（选项式）

setup()函数

可以使用setup属性来实现函数式编程
内部直接编写任意代码，可以直接调用，不存在块作用域（方法必须写在methods中）
setup中不可以使用外边data数据，定义响应式数据–关联对象–必须使用ref函数来定义（如果是使用ref定义的变量，那么直接使用）

 //如果是使用ref定义的变量，那么直接使用，并且获取值需要使用.value属性获取console.log('函数式编程', name.value);

定义响应式数据–关联对象–必须使用ref函数来定义

  //定义响应式数据--关联对象--必须使用ref函数来定义const name =Vue.ref('画虎')

ref赋值，不能够直接给数据赋值，只能给数据的.value赋值

setName() {//ref赋值，不能够直接给数据赋值，只能给数据的.value赋值name.value = 'dada'}

获取节点
- 1、定义一个空的ref对象
- 2、这个对象的名字必须和dom节点上的ref属性名字一致
- 3、必须导出这个ref对象
因为ref是关联对象，所以vue3给出了另外一个定义响应式数据的函数–reactive
ref定义的是一个数据ref对象，reactive定义的是一个对象
所以reactive相当于之前的data属性

<body><div id="root" class="container"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body"><div class="form-group"><label for="">用户名字</label><input ref="node" type="text" class="form-control" v-model="name" placeholder="Input field"></div><div class="form-group"><label for="">登录次数</label><input ref="node" type="text" class="form-control" v-model="obj.count" placeholder="Input field"></div><div class="form-group"><label for="">只读的值</label><input ref="node" type="text" class="form-control" v-model="readValue" placeholder="Input field"></div><button type="submit" @click="showName" class="btn btn-primary">获取值</button><button type="submit" @click="setName" class="btn btn-primary">赋值</button><button type="submit" @click="getNode" class="btn btn-primary">获取节点</button></div><panel :count="obj.count"><panel/></div></div><script>const Panel = {template: `<div class="panel panel-warning"><div class="panel-heading"><h3 class="panel-title">Panel title</h3></div><div class="panel-body">获取父组件传递的数据{{mycount}}</div></div>`,// 如果涉及组件props传参，还是要用props属性接收数据和定义数据props: {count: Number},setup(props) {/* 如果在setup钩子函数中要使用props的数据，必须先使用props定义和接收数据，然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount = Vue.ref(props.count * 10)return {mycount}}}Vue.createApp({// 组件注册，还是使用components属性components: {'panel':Panel},// 可以使用setup属性来实现函数式编程// 内部直接编写任意代码，可以直接调用，不存在块作用域（方法必须写在methods中）setup() { 如果定义的方法，dom节点需要使用，必须进行导出--returnfunction showName() {//setup中不可以使用外边的data数据//如果是使用ref定义的变量，那么直接使用，并且获取值需要使用.value属性获取console.log('函数式编程', name.value)console.log('获取reactive的值', obj.count)console.log('获取redonly的值', readValue);}//定义响应式数据--关联对象--必须使用ref函数来定义const name =Vue.ref('画虎')//获取节点：// 1、定义一个空的ref对象// 2、这个对象的名字必须和dom节点上的ref属性名字一致// 3、必须导出这个ref对象const node = Vue.ref()function getNode() {console.log(node.value)//}/*** + 因为ref是关联对象，所以vue3给出了另外一个定义响应式数据的函数--reactive+ ref定义的是一个数据ref对象，reactive定义的是一个对象+ 所以reactive相当于之前的data属性*/const obj = Vue.reactive({count:1})  /** 定义只读数据 */const readValue = Vue.readonly(10000)return {name,node,obj,readValue,showName,setName() {//ref赋值，不能够直接给数据赋值，只能给数据的。value赋值name.value = 'dada'},getNode}}}).mount('#root')</script>
</body>
</html>

函数式编程组件传值

组件注册，还是使用components属性

 // 组件注册，还是使用components属性components: {'panel':Panel},

如果涉及组件props传参，还是要用props属性接收数据和定义数据

 // 如果涉及组件props传参，还是要用props属性接收数据和定义数据props: {count: Number},

如果再setup钩子函数中要使用props的数据，必须使用props选项来定义数据，然后在setup钩子函数中使用形参来接收数据

setup(props) {/* 如果在setup钩子函数中要使用props的数据，必须先使用props定义和接收数据，然后通过setup参数获取数据 */console.log(props)//如果要修改数据const mycount = Vue.ref(props.count * 10)return {mycount}}

生命周期钩子函数

setup钩子函数要早于beforeCreate生命周期，并且它实现了方法和数据定义所以setup可以理解为创建生命周期
因此setup钩子函数中如果要实现生命周期，那么没有创建生命周期，只有挂载、更新、卸载
所以vue3的生命周期钩子函数有6个：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
四个阶段，每一个阶段分为之前之后，vue3中提供了两种写法，选项式和钩子函数式，在setup中没有创建生命周期，因为setup限于创建生命周期而执行，所以可以把setup当创建生命周期使用