(一)vue3重要新特性setup,relactive,ref,toRefs的使用分析,以及对象拼接,数组拼接,对象函数拼接,以及对vue2的beforecreate,created,mounted生命周期分析(前面使用data,method在vue3不被推行,所以在呢篇文章进行纠正)

1：setup()

(1)vue3推行把所有方法,数据都放在setup()里面,而不是放在method,data里面了,虽然也能呢样放，但是vue3已经不推荐使用呢种方式了

(2)vue新推出了一个setup方法,setup里面的数据本身不是响应式的,未来解决呢个问题vue3推出了relactive(),ref()把普通数据变成响应式数据,

vue3推荐把所有方法属性都定义到setup里面，而不是像vue2,把数据放data,方法放method呢种分离了，而是一把梭，都定义到setup里面去了

(3)生命周期，在vue实例还没有创建的时候执行,所有呢里面不能this.,因为呢时候vue实例还没有创建,vue3已经不推beforecreate,created了,呢两个在vue2里面会用到

在vue2里面created执行周期是vue实例创建完成,templete模板呢时候还没有编译成html,所以呢时候的dom元素是不能使用的，但是可以使用this对一些数据进行初始化操作

mounted以后，页面被编译成了html,数据绑定完整，实现了数据双向绑定

(4)vue3里面如果需要在页面第一次加载完成后给数据赋值,一般在onmounted里面去做，那个onmounted需要按需导入，import {onmounted}from 'vue'，然后在setup里面通过箭头函数使用他,意义和vue2的mounted()函数一样

(5)如果页面要使用setup里面的变量或者方法必须return出去

 

2:ref()

(1)把普通数据变成响应式数据,ref里面的数据可以不是对象,不受限制,reactive里面必须是对象

(2)绑定一个dom元素，页面通过<el-form ref="formrule"指定ref,setup里面创建  const formrule=ref()，呢样就可以把ref绑定到对应的dom元素,通过formrule获取到dom元素了

(3)没有return出去的值必须通过value取出来在使用,return出去的就不用value取了,系统会自动帮我们value,就可以直接使用了

 

3.reactive()

把普通对象的数据变为响应式对象数据,只能接受对象

 

4:ref()和reactive区别

reactive和ref都能实现响应数据，reactive只能放对象,ref没有限制,ref还可以绑定dom元素,类似于id,通过ref获取dom元素

 

5：对象拼接,数组拼接,对象和函数拼接

 (1)对象和函数的拼接

 const satate=reactive({name:"mmss",no:1});

 {...toRefs(satate),Updatevalue }这里的...相当于把对象和函数拼接成了一个新对象,相当于return{no:1,Updatevalue}

(2)数组间的拼接

var a=[1,2] var b=[3,4] var c=[...a,...b]后最后就是c=[1,2,3,4]

(3)对象间的拼接

var a={n1:1,n2:2} var b={n3:3,n4:4} var c={...a,...b}后最后就算c={n1:1,n2:2,n3:3,n4:4}

(4)经过...属性计算以后响应式就被取消了,如果还要保留响应式就必须toRefs()

 

以下是完整代码：

<template>

 <!-- reactive响应式数据 -->

  <button @click="Updatevalue()">递增</button>

  <h1>{{ no }}</h1>

  <!-- ref绑定dom元素 -->

  <!-- dom绑定dom的时候不能在template直接 {{refinput.value}},因为呢时候dom和ref正在进行绑定 -->

    <input type="text" id="oooo" ref="refinput" value="yyuu" style="color:black;"/>

    <button @click="Getref(refinput)">获取ref元素</button>

    <!-- ref响应式数据 -->

    <button @click="UpdateRef()">改变ref元素</button>

    {{refupval}}

</template>

<script>

import { reactive,toRefs,ref } from 'vue';

export default {

  name: "AppXx",

  setup(){

    //实现响应式数据

    const satate=reactive({name:"mmss",no:1});

    const Updatevalue= ()=>{

         satate.no++;

    }

    //ref绑定dom元素

    //我们自己的业务代码尽量使用双向绑定,少操作dom,操作dom比较消耗性能

    //但是我们在引用一些第三方插件的时候,比如element-plus表单验证,呢时候它并不知道我们的页面有哪些元素,所以呢时候它就需要拿到我们的的dom元素进行操作

    const refinput=ref();

    //ref绑定的dom元素直接取值必须ref.value获取,ref绑定的dom元素return出去后就不需要ref.value了

    const Getref=(refval)=>{

        console.log (refval.style.color+" " +refval.value+" "+refinput.value.style.color)

        refval.value="eeee"

        refinput.value.value="222"

    }

    //ref实现响应式数据,没有return出去的值必须ref.value方式取

    const refupval=ref(["1","2","3"]);

    const UpdateRef=()=>{

      refupval.value[2]="4445";

    }

  return {

    ...toRefs(satate),Updatevalue,refinput,Getref,refupval,UpdateRef

 }

 

 }

}

</script>