vue3 api学习

作者: Rascar | 来源:发表于2022-01-28 17:32 被阅读0次

1.setup 为什么不能使用this？

a：因为在setup中为了避免使用this，因为他不会在组件实例上面找到；setup调用时methods 和计算属性等都是在解析之前，所以setup没有办法使用this

2.reactive的使用(将数据变成响应式)

<template>
    <h3 @click="h3click">{{obj.name}}</h3>    
</template>
setup(){
    const  objs = reactive({
        name:why
    })
    const h3click = () => {
        objs.name = "xxxx"
    }
    return{
        objs,h3click
    }
}

3.ref的使用(变成响应式数据)

<template>
//在template 里面会有浅层解包
    <h3 @click="h3click">{{count}}</h3>    
</template>
setup(){
    const  count = reactive(0)
    const h3click = () => {
        count.value ++
    }
    return{
        count,h3click
    }
}

4.readonly（数据不可改变的,只读的）

<template>
  <div class="home">
    <h3>{{ objs.name }}</h3>
    <button @click="h3click">++</button>
  </div>
</template>

<script>
import { reactive, readonly } from 'vue'
export default {
  name: 'Home',
  setup() {
    // 普通对象
    const obj1 = {
      name: xxx
    }
    // 不可改变的数据
    const read1 = readonly(obj1)
    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
    // 不可改变的数据
    const read = readonly(objs)
    // ref响应式数据
    const objs2 = ref({ name: 'xxx' })
    // 不可改变的数据
    const read2 = readonly(objs2)
    const h3click = () => {
      read.name = 'xxxgg'
    }
    return { h3click, objs }
  }
}
</script>

5.isReactive，判断是否包裹了reactvie创建的代理他也会返回true

<template>
//在template 里面会有浅层解包
    <h3 @click="h3click">{{count}}</h3>    
</template>
setup(){
     // 普通对象
    const obj1 = {
      name: 'xxx'
    }
    // 不可改变的数据
    const read1 = readonly(obj1)
    
     // ref响应式数据
    const objs2 = ref({ name: 'xxx' })
    // 不可改变的数据
    const read2 = readonly(objs2)
    
    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
    // 不可改变的数据
    const read = readonly(objs)
    const h3click = () => {
      const falg = isReactive(read1)//false
      const falg1 = isReactive(read2)//false
      const falg2 = isReactive(read)//true
        
    }
    return{
        count,h3click
    }
}

6.toRefs的使用:(进行对reactive 数据进行结构)必须是在reactive中使用


<template>
//在template 里面会有浅层解包
    <h3 @click="h3click">{{name}}</h3>    
</template>
setup(){

    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
    //const {name} = toRefs(objs)
    const h3click = () => {
        //name.value = "gggg"
        objs.name = "ggg"
    }
    return{
        //name,
        ...toRefs(objs)
        h3click
    }
}

7.toRef的使用必须是在reactive中使用


<template>
//在template 里面会有浅层解包
    <h3 @click="h3click">{{name}}</h3>    
</template>
setup(){

    // 响应式数据reactive
    let objs = reactive({
      name: 'xxx'
    })
   const name = toRef(objs,"name")
    const h3click = () => {
        name.value = "gggg"
    }
    return{
        name,
        h3click
    }
}

8.computed的使用

<template>
  <div class="home">
    <h3>{{ fullName }}</h3>
    <button @click="h3click">++</button>
  </div>
</template>

<script>
import { reactive, readonly, isReactive, ref, toRefs, computed } from 'vue'
export default {
  name: 'Home',
  setup() {
    const firstName = ref('zkl')
    const lastName = ref('why')
    // 方法一使用
    // const fullName = computed(() => firstName.value + ' ' + lastName.value)
    // 第二中get 和set的用发
    const fullName = computed({
      get: () => firstName.value + ' ' + lastName.value,
      set: (newValue) => {
        let names = newValue.split(' ')
        firstName.value = names[0]
        lastName.value = names[1]
      }
    })

    const h3click = () => {
      fullName.value = 'coder why'
    }
    return { h3click, fullName }
  }
}
</script>

9.watchEffect自动收集响应式的依赖

<template>
  <div class="home">
    <h3>{{ fullName }}</h3>
    <button @click="h3click">++</button>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'
export default {
  name: 'Home',
  setup() {
    const fullName = ref(12)
    // 基本使用
    // watchEffect(() => {
    //   console.log(fullName.value, '数量')
    // })
    // 取消监听数据
    // const stop = watchEffect(() => {
    //   console.log(fullName.value, '数量')
    // })
    // const h3click = () => {
    //   fullName.value++
    //   if (fullName.value >= 25) {
    //     // 取消监听
    //     stop()
    //   }
    // }
    // 取消副作用
    watchEffect(
      (clerVal) => {
        console.log(fullName.value)
        let timer = setTimeout(() => {
          console.log('发送请求')
        }, 1300)
        clerVal(() => {
          console.log('333')
          clearTimeout(timer)
        })
      },
        //调整执行顺序
      {
        // flush:"pre"//默认值
        // flush:"post"//dome加载完后使用这个参数
      }
    )
    const h3click = () => {
      fullName.value++
    }
    return { h3click, fullName }
  }
}
</script>

10.watch的使用

<template>
  <div class="home">
    <h3>{{ info.name }}</h3>
    <button @click="h3click">++</button>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue'
export default {
  name: 'Home',
  setup() {
    const info = reactive({ name: 'zkl' })
    const names = ref("why")
    // 传日一个get函数
    // watch(
    //   () => info.name,
    //   (newValue, oldValue) => {
    //     console.log(newValue + 'x', oldValue + 'j')
    //   }
    // )

    //1. 监听reactive响应对象和ref响应数据
    // 监听reactive对象
    watch(info, (newValue, oldValue) => {
      console.log(newValue + 'x', oldValue + 'j')
    })
    // 将reactive响应对象转换成普通对象
    // watch(
    //   () => {
    //     return {
    //       ...info
    //     }
    //   },
    //   (newValue, oldValue) => {
    //     console.log(newValue,'x', oldValue, 'j')
    //   }
    // )
    // 2.监听ref对象
    const names = ref('zkl')
    watch(names, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })
      //监听多条数据
      watch([info, names], ([newValue, oldValue], [newname, oldname]) => {
      console.log(newValue, oldValue, newname, oldname)
    })
      
     //深度监听和立即监听
     //深度监听和立即监听，watch默认是深度监听的如果。如果使用结构赋值就不能深度监听
       const info = reactive({
      name: 'zkl',
      firend: {
        name: 'why'
      }
    })
    watch(
      () => ({ ...info }),
      (newInfo, oldInfo) => {
        console.log(newInfo, oldInfo)
      },
      {
        deep: true, //深度监听
        immediate: true //立即执行
      }
    )
    const h3click = () => {
      info.firend.name = 'xxx'
    }

    const h3click = () => {
      info.name = 'xxx'
      names.value = 'jjj'
    }
    return { h3click, info }
  }
}
</script>

11.onMounted，onUnmounted,onUpdated,的使用（生命周期）

<template>
  <div class="home">
    <button @click="getCount">++</button>
    {{ counter.counter }}
    <abuto :counter="counter" />
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, onUpdated } from 'vue'
import abuto from './About.vue'
export default {
  components: {
    abuto
  },
  name: 'Home',
  setup() {
    const counter = ref({
      counter: 0
    })
    const getCount = () => counter.value.counter++
    onMounted(() => {
      console.log('onMounted 的使用')
    })
    onUpdated(() => {
      console.log('页面发生改变的时候')
    })
    onUnmounted(() => {
      console.log('销毁执行')
    })

    return {
      getCount,
      counter
    }
  }
}
</script>

12.provide和inject的使用（父和孙组件的时候使用）

//父组件
<template>
  <div class="home">
    <button @click="getCount">++</button>
    {{ counter.counter }}
    <abuto />
  </div>
</template>

<script>
import { ref, provide, readonly } from 'vue'
import abuto from './About.vue'
export default {
  components: {
    abuto
  },
  name: 'Home',
  setup() {
    const counter = ref({
      counter: 0
    })

    const getCount = () => counter.value.counter++
    //孙组件不可以修改数据 readonly
    provide('counterValue', readonly(counter))
    return {
      getCount,
      counter
    }
  }
}
</script>
//孙组件
<template>
  <div class="about">
    <h1>{{ value.counter }}</h1>
    <button @click="editClick">修改父组件数据</button>
  </div>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    const value = inject('counterValue')
    const editClick = () => value.value++
    return { value, editClick }
  }
}
</script>

13.自定义指令局部指令

<template>
  <div class="home">
    <input type="text" v-fouret="'cc'" />
  </div>
</template>

<script>
export default {
  directives: {
    fouret: {
      created(el, bings) {
        console.log(el)
      },
      mounted(el, bings, vonde, newNode) {
        console.log(oldnode)
        //el:获取的dom元素
        //bings：自定义指令传值和修饰符
        el.focus()
      }
    }
  },
  name: 'Home',
}
</script>

14.自定义指令案例(全局组件)

<template>
  <div class="home">
    <h1 v-formatTime="'YYYY/MM/DD'">{{ content }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
  setup() {
    const content = 1644547805
    return { content }
  }
}
</script>
//app里面定义全局组件
<script>
import dayjs from 'dayjs'
export default function (app) {
  app.directive('formatTime', {
    mounted(el, bindgs) {
      let formString = 'YYYY-MM-DD HH:mm:ss'
      const textContent = el.textContent
      let timestamp = parseInt(textContent)
      if (textContent.length === 10) {
        timestamp = timestamp * 1000
      }
      if (bindgs.value) {
        formString = bindgs.value
      }
      el.textContent = dayjs(timestamp).format(formString)
    }
  })
}
</script>

15.这样获取全局属性

//main.js
app.config.globalProperties.$name = '烦死了'
//其他地方使用
import { getCurrentInstance } from 'vue'
 //获取全局内容
const { appContext } = getCurrentInstance()
console.log(appContext.config.globalProperties.$name)

vue3 api学习

1.setup 为什么不能使用this？

2.reactive的使用(将数据变成响应式)

3.ref的使用(变成响应式数据)

4.readonly（数据不可改变的,只读的）

5.isReactive，判断是否包裹了reactvie创建的代理他也会返回true

6.toRefs的使用:(进行对reactive 数据进行结构)必须是在reactive中使用

7.toRef的使用必须是在reactive中使用

8.computed的使用

9.watchEffect自动收集响应式的依赖

10.watch的使用

11.onMounted，onUnmounted,onUpdated,的使用（生命周期）

12.provide和inject的使用（父和孙组件的时候使用）

13.自定义指令局部指令

14.自定义指令案例(全局组件)

15.这样获取全局属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读