您的位置:首页 > 编程学习 > > 正文

vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)

更多 时间:2022-01-14 02:07:54 类别:编程学习 浏览量:1345

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函数

    vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)

    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>
    
  • vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)

    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函数的资料请关注开心学习网其它相关文章!

    您可能感兴趣