vue3 setup函数,vue 3 setup
本文主要介绍vue3功能的设置和反应功能的相关知识，以及设置和反应功能的注意事项。通过具体的代码非常详细的介绍给大家，有需要的朋友可以参考一下。
设置1的执行时间
众所周知，vue3现在已经可以正常使用方法了。
但是我们不能调用setUp中的方法。
为什么？
让我们来看看以下两个生命周期函数，它们是：
BeforeCreate确认数据中的数据尚未初始化，不能使用。
已创建：数据已初始化，可以使用
在创建前设置和创建后设置这两个功能之间。
不，我知道为什么methods中的方法不能在setUp中调用了。
2.data中的数据和调用方法的方法不能在2.setUp中使用
脚本
导出默认值{
名称：“应用程序”，
数据：函数(){
返回{
混乱：“我是数据”
}
},
方法：{
func(){
Console.log (func in methods )
},
},
setup(){
console.log(this ，this)；//未定义
this . func()；//无法调用。
},
}
/脚本
3.3 .设置功能的注意事项
(1)因为我们不能在setUp函数中使用数据和方法。
所以为了避免我们误用，vue直接把这个放在了设置功能里。
更改为未定义
(2)设置功能只能同步，不能异步。
这意味着你不能这样做。
异步设置(){
},
这将导致空白界面。
4 Vue3中的反应
在Vue2中，响应数据由de fineProperty实现。
在Vue3中，响应数据由ES6的代理实现。
反应性要求的注意点
反应参数必须是对象(json/arr)
如果其他对象被传递给reactive
默认修改对象，界面不会自动更新。
如果您想更新它，您可以重新分配它。
5反应式传入字符串数据不是新的。
模板
差异
差异
李{ { str } }/李
Button @click=func1 按钮/按钮
/div
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
reactive的本质是将传入的数据包装到一个代理对象中。
//因为在创建时没有传递对象，所以不会实现响应。
设str=reactive(123)
函数func1(){
console . log(str)；//123
str=666
}
返回{str，func1 }
},
}
/脚本
我们发现，当我们单击按钮时，视图没有更新。
因为我们的传记不是一个对象。如果你想遵循新的观点。
应该使用ref函数。
6电抗输入阵列
模板
差异
差异
李{ { arr } }/李
Button @click=func1 按钮/按钮
/div
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
设arr=reactive([{姓名：张三，年龄：19}，{姓名：李四，年龄：39}])
函数func1(){
Arr[0]。我是张三的哥哥
}
返回{arr，func1 }
},
}
/脚本
7反应性以一种新的方式被引入到其他物体中
模板
差异
差异
李{ { sate . time } }/李
Button @click=func1 按钮/按钮
/div
/div
/模板
脚本
从“vue”导入{reactive}
导出默认值{
名称：“应用程序”，
setup(){
让状态=反应({
时间：新日期()
})
函数func1(){
//直接用新的传递其他对象
Sate.time= June年6月9日；
}
return { sate，func1 }
},
}
/脚本
以上是vue3设置和反应功能的详细讲解的详细内容。更多关于vue3设置和反应式功能的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。