一、组合式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节点需要使用,必须进行导出--return
function 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当创建生命周期使用