[Vue3学习笔记] (二) setup ref reactive与生命周期

[Vue3学习笔记] (二) setup ref reactive与生命周期

一、template不再需要根元素


显然在vue3中template不再一定需要一个父元素才能编译通过了。

二、setup函数初识

2.1、关于setup

​ setup函数其实是一个生命周期钩子,它对应的其实就是Vue2中的beforeCreate和create
在vue3中我们通过这个函数来定义vue2中的data,methods,watch,computed属性(数据定义与处理相关)

2.2、setup使用

​ setup函数必须有返回值,必须返回一个对象,对象里包含所有在template模板中需要使用到的属性(包含data,methods等)

​ setup函数有一个props参数,用于接收props,也就是定义在组件上的属性(同vue2),但是接收的props必须先在props属性中定义,否则是不会被接收到的

下面是一个setup的使用示例:

<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    console.log(props); // Proxy{msg:...}
    const count = ref(0);
    return {
      count,
    };
  },
};
</script>

​ 我们在这里通过ref函数定义了一个变量count,ref函数是一个把普通变量变成Proxy响应式变量的函数。

三、使用 ref & reactive 使得数据经过变成Proxy响应式数据

3.1、ref函数

使用示例:

setup(props) {
    // 使用示例
    const count = ref(0);
    return {
      count,
    };
  },

​ 用ref定义的变量,如果需要取到其变量值,需要使用
“`.value“`属性

比如:

setup(props) {
    // 使用示例
    const count = ref(0);
    const changeCount = ()=>{
        count.value++;
    }
    return {
      count,
    };
  },

​ 我们用
“`changeCount“`替代上述setup示例模板的“`count++“`

<template>
  <h1>{{ msg }}</h1>
  <button @click="changeCount">count is: {{ count }}</button>
</template>

有着相似的作用

ref的另一个用法:

调用原生DOM

<template>
  <div ref="divBox">ref的调用用法</div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    let divBox = ref(null);
    onMounted(()=>{
      console.log(divBox.value) //<div ref="divBox">ref的调用用法</div>
    })
    return {
      divBox
    };
  },
};
</script>

这里的onMounted与vue2中的mounted是一样的,是vue3的生命周期新用法

3.2、reactive函数

​ reactive函数和ref作用非常接近,但是它的参数是一个对象,我们可以在对象中定义其方法,而通过这个形式,就不需要再对其进行进行
“`.value“`调用了

​ 使用示例如下:

<template>
  <h1>{{ msg }}</h1>
  <button @click="data.changeCount">count is: {{ data.count }}</button>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props) {
    // 定义一个data对象 
    const data = reactive({
      count: 0,
      changeCount: () => {
        data.count++;
      },
    });
    return {
      data,
    };
  },
};
</script>

​ 使用reactive生成的对象也是响应式的,而且调用的时候内部不再需要通过value拿到并且更改属性,但是由于外部封装了一层对象,所以在模板中使用的时候必须要使用data.xxx进行相关的调用。

​ PS:由于reactive返回的对象本质上已经是一个Proxy对象,所以通过…扩展符号展开的属性,是无法进行响应式的,也就是

return{
    ...data
}

并不能如同预期结果般起效

如果实在需要使用拓展符号,需要使用toRefs这个API

<template>
  <button @click="changeCount">count is: {{ count }}</button>
</template>

<script>
import {  reactive,toRefs } from "vue";
export default {
  name: "HelloWorld",
  setup(props) {
    const data = reactive({
      count: 0,
      changeCount: () => {
        data.count++;
      },
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>

四、Vue3的生命周期

vue2的所有生命周期写法与vue3兼容

而在vue3中,生命周期添加了on前缀,需要导入并写在setup()函数中

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {
    console.log("mounted outside setup <vue2>");
  },
  setup(props) {
    onMounted(() => {
        console.log("onMounted in setup <vue3>")
    });

    return {
    };
  },
};
</script>

1 - 开始创建组件---- - setup();
2 - 组件挂载到页面之前执行---- - onBeforeMount();
3 - 组件挂载到页面之后执行---- - onMounted();
4 - 组件更新之前---- - onBeforeUpdate();
5 - 组件更新之后---- - onUpdated();
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇