vue3 reactive赋值,vue3.0 ref reactive
本文介绍了vue3组合API中setup、ref、reactive的用法，初步了解了reactive的用法和具体用法。通过示例代码非常详细的介绍给大家，有需要的朋友可以参考一下。
1.初识setUp的使用
简要介绍以下代码功能：
使用ref函数监视变量的变化，并将其呈现给视图。
setUp函数是复合API的入口函数。这一点非常重要。
设置可以监控变量的变化！我们将使用它。
内置refvue，需要导入。
模板
div{{ countNum}}/div
按钮@click=handerFunc 按钮/按钮
/模板
脚本
从“vue”导入{ref}
导出默认值{
名称：“应用程序”，
setup() {
//这句话表示定义了变量count。这个变量的初始值是100。
设count num=ref(100)；
//在复合API中，如果要定义方法，不需要在方法中定义。直接定义就好了。
函数handerFunc(){
//console . log(count num)；//countNum是对象
count num . value=10；
}
//组合api中定义的方法，或者变量。如果外界需要使用，必须通过return {aaa，func}来公开。
return { countNum，handerFunc}
}
}
/脚本
2认识reactive的使用
ref函数只能监听简单的数据更改。
无法侦听，复杂类型更改(数组、对象)。
于是我们的主角，无功，出现了。
设置中的功能会自动执行一次。
模板
差异
保险商实验所
Li v-for= item in satte . arr :key= item . id
{{item.name }}
/李
/ul
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
Console.log(将自动执行安装)
ref函数的注释：
ref函数只能监视简单的数据变化，不能监视复杂的数据变化(数组和对象)。
reactive方法内部是一个对象。
设satte=reactive({
arr:[
{姓名：司腾，id:0011}，
{姓名：皮下，id:0011}，
{姓名：百年约会，id:0012}，
{姓名：三生三世，id:0013}，
]
})
return { satte }
},
}
/脚本
3使用reactive
实现视图的删除。
模板
差异
保险商实验所
li v-for=(item，index)in satte . arr :key= index @ click= del(index)
{{item.name }}
/李
/ul
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
设satte=reactive({
arr:[
{姓名：司腾，id:0011}，
{姓名：皮下，id:0011}，
{姓名：百年约会，id:0012}，
{姓名：三生三世，id:0013}，
]
})
//删除点击的元素
函数del(索引){
for(设I=0；is atte . arr . length；i ){
if(index==i){
satte.arr.splice(i，1)
}
}
}
return { satte，del}
},
}
/脚本
4将删除的逻辑分离出去
形成单个模块。
模板
差异
保险商实验所
li v-for=(item，index)in satte . arr :key= index @ click= del(index)
{{item.name }}
/李
/ul
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
//onlyDelLuoJi()方法包含一个数组和一个方法；类似于解构
let {satte，del }=onlyDelLuoJi()；
//公开给外界使用
return { satte，del}
},
}
function onlyDelLuoJi(){
设satte=reactive({
arr:[
{姓名：司腾，id:0011}，
{姓名：皮下，id:0011}，
{姓名：百年约会，id:0012}，
{姓名：三生三世，id:0013}，
]
})
//删除点击的元素
函数del(索引){
for(设I=0；is atte . arr . length；i ){
if(index==i){
satte.arr.splice(i，1)
}
}
}
//公开数据状态和方法del。
return { satte，del }
}
/脚本
5. 实现添加功能
在事件之间传递参数
模板
差异
差异
输入类型= text v-model= addobj。看电视。名称
button @click=addHander 添加/按钮
/div
保险商实验所
在satte中li v-for=(item，index)。 arr :key= index @ click= del(index)
{{item.name }}
/李
/ul
/div
/模板
脚本
从“vue”导入{反应性}
导出默认值{
名称："应用程序",
setup(){
//onlyDelLuoJi()方法中含有一个数组和一个方法；类似于解构
let {satte，del }=onlyDelLuoJi()；
//传递参数幸手市是昂立德罗吉函数中提供的星期六。进行传递
let { addobj，add hander }=OnlyaddHander(satte)；
//暴露给外界使用
return { satte，del，addobj，addHander}
},
}
//添加功能模块
function OnlyaddHander(satte){
console.log(初始化添加，satte)
设addobj=无功({
watchTv:{
名称：,
id:" "
}
});
函数addHander(){
//重置清空错吴做法
//satte。由…改编推(addobj。看电视)
//添加obj。看电视。name=
//添加obj。看电视。id=
//正确做法
let oldobj=Object.assign({}，addobj.watchTv)
satte.arr.push(oldobj)
}
return { addobj，addHander }
}
//删除功能模块
function onlyDelLuoJi(){
console.log(删除初始化)
设satte=反应式({
arr:[
{姓名：司藤，id:0011}，
{姓名：皮囊之下，id:0011}，
{姓名：百岁之约，id:0012}，
{姓名：三生三世，id:0013}，
]
})
//删除被点击的元素
函数德尔(索引){
对于(设I=0；是atte。由…改编长度；i ){
if(index==i){
satte.arr.splice(i，1)
}
}
}
//将数据幸手市和方法倒三角形暴露出去
return { satte，del }
}
/脚本
6 将他们抽离成单独的文件
我们想在想将添加删除相关的逻辑，单独抽离成一个文件。
add.js是添加相关的逻辑
德尔。射流研究…是删除的相关逻辑
从“vue”导入{反应性}
function OnlyaddHander(satte){
console.log(初始化添加，satte)
设addobj=无功({
watchTv:{
名称：,
id:" "
}
});
函数处理器(五)
//重置清空错吴做法
//satte。由…改编推(addobj。看电视)
//添加obj。看电视。name=
//添加obj。看电视。id=
//正确做法
let oldobj=Object.assign({}，addobj.watchTv)
satte.arr.push(oldobj)
e。防止默认()；
}
return { addobj，addHander }
}
仅导出默认添加处理程序
adel.js
从“vue”导入{反应性}
function onlyDelLuoJi() {
console.log(删除初始化)
设satte=反应式({
arr:[
{姓名：司藤，id:0011}，
{姓名：皮囊之下，id:0011}，
{姓名：百岁之约，id:0012}，
{姓名：三生三世，id:0013}，
]
})
//删除被点击的元素
函数德尔(索引){
对于(设I=0；是atte。由…改编长度；i ){
if(index==i){
satte.arr.splice(i，1)
}
}
}
//将数据幸手市和方法倒三角形暴露出去
return { satte，del }
}
仅导出默认德罗吉
主文件
模板
差异
差异
输入类型= text v-model= addobj。看电视。名称
button @click=addHander 添加/按钮
/div
保险商实验所
在satte中li v-for=(item，index)。 arr :key= index @ click= del(index)
{{item.name }}
/李
/ul
/div
/模板
脚本
仅从导入德洛吉./组件/del
仅从导入添加处理程序。/组件/添加
导出默认值{
名称："应用程序",
setup(){
//onlyDelLuoJi()方法中含有一个数组和一个方法；类似于解构
let {satte，del }=onlyDelLuoJi()；
//传递参数
let { addobj，add hander }=OnlyaddHander(satte)；
//暴露给外界使用
return { satte，del，addobj，addHander}
},
}
/脚本
以上就是vue3组合应用程序接口中设置、参考、反应的用法的详细内容，更多关于某视频剪辑软件组合应用程序接口的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。