vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
vue3.0 如何使用useroute
详解vue3中setUp和reactive函数的用法1 setUp的执行时机
我们都知道,现在vue3是可以正常去使用methods的。
但是我们却不可以在setUp中去调用methods中的方法。
为什么了???
我们先了解一下下面这两个生命周期函数,分别是:
beforeCreate 表示data 中的数据还没有初始化,是不可以使用的
Created : data已经被初始化了,可以使用
setUp在beforeCreate 和 Created 这两个函数之间。
是不是就知道为啥setUp中不可以去调用methods中的方法了。
2.setUp中无法使用data中的数据和调用methods的方法
<script> export default { name: 'App', data:function(){ return { mess:"我是data" } }, methods:{ func(){ console.log("methods中的func") }, }, setup(){ console.log('this',this);//undefined this.func();//无法调用的哈 }, } </script>
3.setUp函数的注意点
(1)由于我们不能够在setUp函数中使用data和methods.
所以vue为了避免我们的错误使用,直接将setUp函数中的this
修改成为了undefined
(2) setUp函数只能够数同步的,不能够是异步的哈。
就是说你不能够这样操作
async setup(){
},
这样会导致界面空白哈
4 Vue3中的reactive
在Vue2中响应式数据是通过de fineProperty来实现的.
而在Vue3中响应式数据是通过ES6的Proxy来实现的
reactive需要的注意点
reactive参数必须是对象(json/arr)
如果给reactive传递了其它对象
默认情况下修改对象,界面不会自动更新
如果想更新,可以通过重新赋值的方式
5 reactive传入字符串数据不跟新
<template> <li> <li> <li>{{str}}</li> <button @click="func1">按钮</button> </li> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ // reactive 的本质就是传入的数据包装成一个proxy对象 // 由于在创建的时候,传递的不是一个对象,那么将不会实现响应式。 let str=reactive(123) function func1(){ console.log(str);//123 str=666; } return {str,func1 } }, } </script>
我们发现点击按钮的时候,视图并没有更新。
因为我们传不是一个对象.如果想跟新视图。
应该使用ref函数
6 reactive传入数组
<template> <li> <li> <li>{{arr}}</li> <button @click="func1">按钮</button> </li> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ let arr=reactive([{name:'张三',age:19},{name:'李四',age:39}]) function func1(){ arr[0].name="我是张三的哥哥" } return {arr,func1 } }, } </script>
7 reactive传入其他对象的跟新方式
<template> <li> <li> <li>{{sate.time}}</li> <button @click="func1">按钮</button> </li> </li> </template> <script> import {reactive} from 'vue' export default { name: 'App', setup(){ let sate=reactive({ time:new Date() }) function func1(){ //传入的是其他对象,直接跟新 sate.time="2021年-6月-9日"; } return {sate,func1 } }, } </script>
以上就是vue3 setUp和reactive函数详细讲解的详细内容,更多关于vue3 setUp和reactive函数的资料请关注开心学习网其它相关文章!
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue端口号是什么原理(解决vue前后端端口不一致的问题)
- vue做个人页面(vue简易记事本开发详解)
- vue滑动切换页面(vue实现点击翻转效果)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue 父组件传值(Vue两个同级组件传值实现)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
热门推荐
- 如何删除docker中已停止的容器(一条命令重启所有已停止的docker容器操作)
- sql数据分页怎么查询(SQL数据分页查询的方法)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- nginx负载均衡原理3种(Nginx负载均衡以及动静分离的原理与配置)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- python分词操作(Python英文文本分词无空格模块wordninja的使用实例)
- 云服务器如何选供应商(如何选择云服务器运营商?)
- css可以控制网页背景图片吗(CSS实现网页背景图片自适应全屏的方法)
- SET NOCOUNT ON 作用
- php协议使用教程学习(php中的钩子理解及应用实例分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9