Vue3组合式api

长安城外一根草

已于 2023-04-27 08:28:03 修改

阅读量57

点赞数 1

分类专栏： Vue 文章标签：前端 vue.js javascript

于 2023-04-12 17:25:07 首次发布

本文链接：https://blog.csdn.net/m0_72720243/article/details/130112184

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

setup 函数

setup函数启动页面后自动执行的一个函数，项目中所有定义的变量、方法都需要写在setup函数中，需要注意的是，所有setup函数中定义的变量和方法最后都需要return出去，否则无法在视图中使用。
在这里插入图片描述

ref函数

当ref里的值发生改变的时候，视图层也会跟随更新(响应式数据)ref可以操作基本数据类型，也可以操作复杂数据类型：对象数组。
建议：使用ref操作基本数据类型：数字和字符串

在这里插入图片描述

reactive函数

reactive同样也是为我们创建一个响应式的引用，不同的是reactive不能用作到基本数据类型上。 reactive主要是作用在复杂的引用数据结构数据上，例如多维数组及对象，reactive可以响应深层次数据，reactive返回一个proxy代理对象，使用上和ref稍有区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{tree}}</div>
    <div v-for="i in arr">{{i}}</div>
    <br>
    <div v-for="i in data.person">{{i}}</div>
    =====================
    <div>{{mark}}</div>
    <div>{{mark}}</div>
    <div>{{mark}}</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">

    const {createApp,reactive,toRefs,ref,toRef} = Vue
    const app = createApp({
        setup(){

            let tree = ref('小树苗');
            const arr = ref(['苹果','香蕉','橘子'])
            const person = ref({
                name:'张三',
                age : 50,
                mark: '法外狂徒12'
            })

            const data = reactive({
                person:{
                    name:'张三',
                    age : 50,
                    mark: '法外狂徒123123'
                }
            })



            let mark = toRef(data.person,'mark')

            return {tree,arr,person,mark,data}
        }
    }).mount('#app')
</script>

computed函数

基本的计算函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="app">
{{m()}}
{{c}}
</div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">

    const {createApp,reactive,toRefs,computed} =Vue
    const app = createApp({
        setup(){
            const data = reactive({
              List: ["占山","李四"]
            })
            const m = () =>{
                return data.List.length >0 ? '有中文': '没中文'
            }
            const c = computed(() => {
                return data.List.length >0 ? '有中文': '没中文'
            })
            return{...toRefs(data),m,c}
        }
    }).mount("#app")
</script>

vue声明周期(重要)

vue的声明周期非常重要，大部分vue面试的时候都会被问到，学习vue声明周期也会让你对vue有更深层次的理解，我们先以vue2的生命周期图示为例
在这里插入图片描述
vue3 与 vue2 声明周期对比：

测试vue3 生命周期函数：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="name">
    <a href="双向绑定.html">1111111111111111111</a>
  </div>
</body>
</html>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript">
  const {createApp,
    reactive,
    toRefs,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted} = Vue
  const app = createApp({
    setup(){
      console.log("========setup========")
      const data = reactive({
        name:'zhangsan'
      })

      onBeforeMount(() => {
        console.log("========onBeforeMount========")
      })

      onMounted(() => {
        console.log("========onMounted========")
      }),
      onBeforeUpdate(() => {
        console.log("========onBeforeUpdate========")
      }),
      onUpdated(() => {
        console.log("========onUpdated========")
      }),
      onBeforeUnmount(() => {
        console.log("========onBeforeUnmount========")
      }),
      onUnmounted(() => {
        console.log("========onUnmount========")
      })
      return {...toRefs(data)}
    },
  }).mount('#app')
</script>