Vue3.x快速上手（一）Vue3.x的主要函数

2023-10-31 16:13:34

创建Vue3.x框架Demo

<script src="https://unpkg.com/vue@next"></script>
<body>
  <div id="app">
    {{title}}
  </div>
  <script>
    const {createApp} = Vue
    const app= createApp({
      data(){
        return {
          title:123
        }
      }
    })
    let vm = app.mount('#app')
  </script>
</body>

原来的data()函数还是可以用的，有双向绑定

Setup函数

Vue3.x的一大新特性就是引入了setup函数，除了默认延续了Vue2.x的已有开发方式以外，Vue3.x可以在createApp时传入一个setup函数，该函数会在组件创建前并且props属性绑定完成时执行，所以在其内部的this上下文对象还没有指向Vue对象的实例。setup中存在两个参数props和content，可以在props中获取组件外传入的参数，可以在content中使用组件的内置对象。

<div id="app">
    {{title}}
  </div>
  <script>
    const {createApp} = Vue
    const app= createApp({
      setup(props,content){
        console.log(this)//this指向window
        let title = 'setUp数据'
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
  </script>

setUp中获取不到vm中的数据

Reactive函数

reactive是Vue3.x提供的对象实例外部的响应式数据对象，配合实现双向绑定的

<div id="app">
    <input type="text" v-model='userInfo.username'>
    <input type="text" v-model='userInfo.password'>
    <br>
    {{userInfo}}
  </div>
  <script>
    const {createApp,reactive} = Vue
    const app= createApp({
      setup(){
        let userInfo = reactive({
          username:'账号',
          password:'密码'
        })
        return {
          userInfo
        }
      }
    })
    let vm = app.mount('#app')
  </script>

Ref函数

在setup中虽然可以使用reactive实现响应式的数据定义，但是声明多个会造成数据的不必要嵌套，此时可以使用ref来进行数据的创建，ref会将嵌套的基本类型数据返回成只有value属性的对象，并将其值挂载到组件的实例上。

<div id="app">
    {{title}}
  </div>
  <script>
    const {createApp,reactive,ref} = Vue
    const app= createApp({
      setup(){
        let title = ref('ref数据')
        console.log('setUp中的title',title)
        // ref会将嵌套的基本类型数据返回成只有value属性的对象，并将其值挂载到组件的实例上。
        setTimeout(() => {
          // 在setup中更改ref中的值需要更改value属性
          title.value = '我是setup中更改的数据'
        }, 3000);
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
    console.log('vm',vm)

和ref不同的是,reactive在setUp函数内外都可以通过vue对象来改变数据.

toRef函数

<div id="app">
    <input type="text" v-model='userInfo.username'><br>
    <input type="text" v-model='userInfo.password'><br>
    <input type="text" v-model='username'><br>
    <input type="text" v-model='password'><br>
    {{userInfo}}<br>
    {{username}}{{password}}
  </div>
  <script>
    const {createApp,reactive,toRef} = Vue
    const app= createApp({
      setup(){
        let userInfo = reactive({
          username:'账号',
          password:'密码'
        })
        let username = toRef(userInfo,'username')
        let password = toRef(userInfo,'password')
        return {
          userInfo,username,password
        }
      }
    })
    let vm = app.mount('#app')

toRef的作用是将reactive创建的对象中的属性，转换成ref属性，并且建立绑定

unref函数

<div id="app">
    {{title}}<br>{{untitle}}
  </div>
  <script>
    const {createApp,reactive,ref,unref} = Vue
    const app= createApp({
      setup(){
        let title = ref('ref值')
        console.log('title',title)
        let untitle = unref(title)
        console.log('untitle',untitle)
        return {
          title,untitle
        }
      }
    })
    let vm = app.mount('#app')
  </script>

unref可以包裹一个ref对象，并将其value返回，但是和原来值没了绑定关系，有点像浅拷贝，只拷贝值。

watch函数

 <div id="app">
    <input type="range" min="0" max="100" step="1" v-model='value1'>
    <br>
    <input type="range" min="0" max="100" step="1" v-model='value2'>
  </div>
  <script>
    const {createApp,reactive,ref,watch} = Vue
    const app= createApp({
      setup(){
        let value1 = ref(0)
        let value2 = ref(0)
        watch([value1,value2],([n1,n2],[v1,v2])=>{
          console.log('value1变化的值',n1)
          console.log('value1的原值',v1)
          console.log('value2变化的值',n2)
          console.log('value2的原值',n2)
        })
        return {
          value1,value2
        }
      }
    })
    let vm = app.mount('#app')
  </script>

watchEffect函数

 <div id="app">
    <input type="text" v-model='title'>
    </div>
  <script>
    const {createApp,reactive,ref,watch,watchEffect} = Vue
    const app= createApp({
      setup(){
        let title = ref('字符串')
        watchEffect(()=>{
          console.log('自动执行watchEffect')
        })
        watchEffect(()=>{
          console.log('字符串的变化',title.value)
        })
        return {
          title
        }
      }
    })
    let vm = app.mount('#app')
  </script>

没有值变化的时候，watchEffect只运行一次，当有响应属性的值发生变化的时候，会自动执行

computed函数

<div id="app">
    <input type="number" v-model='num'>
    <br>
    计算属性的结果：{{getNum}}<br>
    函数运算的结果：{{getNum1()}}<br>
    <input type="text" v-model='str'>
    </div>
  <script>
    const {createApp,reactive,ref,computed} = Vue
    const app= createApp({
      setup(){
        let num = ref(0)
        let str = ref('普通字符串')
        let getNum = computed(()=>{
          console.log('计算属性执行一次')
          return num.value + '元'
        })
        let getNum1 = ()=>{
          console.log('函数运行一次')
          return num.value + '元'
        }
        return {
          num,getNum,getNum1,str
        }
      }
    })
    let vm = app.mount('#app')
  </script>

computed运算只在追踪内部依赖的发生变化的时候执行，函数计算只要视图更新就会跟着计算

码农公寓