vue3从认识到使用

vue3的基础语法

        ref定义变量并赋值

<script setup>

// 首先在vue3中引入ref
import {ref, onMounted} from 'vue';

//使用ref定义变量
let value1 = ref(100); 

// 改变赋值
 onMounted(()=>{
    value1.value = 200;
    console.log(value1.value,'变量的值')
 });

</script>

        reactive定义变量并赋值

<script setup>
// 引入reactive
import {ref,reactive,onMounted} from 'vue';

// 定义变量并赋值
let arr = reactive({
    arrOne:[100,200,300],
    arrTwo:[
        {
            num:100,
            text:'你好'
        }
    ]
});

// 改变赋值 

onMounted(() => {
  arr.arrOne = [200,400,600];
  arr.arrtwo[0] = {
    num:200,
    text:'改变了'
  } 
  console.log(arr, "当前变量值");
}),
 
</script>

methods 方法定义

        在vue3的setup语法糠中methods方法可以直接定义使用

<template>
  <div>
    <!-- 年龄 + -->
    <h1>{{user.age}}</h1>
    <!-- 调用方法 -->
    <button @click="ageAdd">年龄增加</button>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

let user = reactive({
  name: "张三",
  age: 30,
});
//方法
const ageAdd=()=>{
    user.age++;
}
//方法调用方法
const getUserInfo=()=>{
  addAge()
  console.log(user.age)
}
</script>

computed 计算属性

<script setup>
import { ref, reactive, computed } from "vue";

let userInfo = reactive({
  name: "张三",
  age: 30,
});
//计算属性
const getAge = computed(()=>{
  return '我的年龄'+userInfo.age
})
</script>

watch监听的使用

watch(监听数据源,执行函数,[配置参数])    
//配置参数： 立即执行 深度监听
{immediate: true, deep: true }

<script setup>
import {ref, watch} from 'vue'
 let name = ref('张三')

 //监听器
watch(name,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal);
})

// vue3监听特殊写法,以箭头函数对目标数据进行监听，更优，推荐这种写法

watch(() => props.options,(newVal, oldVal) => {
    console.log("99999999999999999");
    chart.clear();
    chart.setOption(props.options, true);
  }
);

</script>

vue生命周期

       vue3的生命周期对比vue2有了一定的变化，下面是vue2和vue3的生命周期对比。

vue3的组件使用

组件注册

<template>
  <div>
    <child></child>
  </div>
<script setup>
// 在vue3.2 中当我们导入子组件时，setup语法糖会自动去注册该组件，所以注册语句不需要写了。
import child from './components/child.vue'
</script>

组件传参--父传子

// 父组件传递方式
    <template>
      <div class="hello">
      我是父组件
      <!-- 父组件通过:变量(这里是info)绑定值 -->
       <Child :info="parentMsg"></Child>
      </div>
    </template>

    <script setup>
    import Child from './Child'
    import {ref} from 'vue'
    const parentMsg=ref('父组件传递值是a')

    </script>


// 子组件接受和使用
<template>
<!-- info是父组件传递过了的值 -->
  <div>我是子组件拿到了父组件的值是{{info}}</div>
</template>
 
<script setup>
import { toRefs, defineProps } from 'vue'
// 直接接收
const props = defineProps({
  //子组件接收父组件传递过来的值
  info: String,
})

 // 设置默认值
const props = defineProps({
    info: {   
        type: String, // 接收的参数类型
        default: '默认文字', //默认值
    }
})
//使用父组件传递过来的值
const {info} =toRefs(props)
 
</script>

组件传参--子传父

// 子组件代码

<template>
  <button @click="clickChild">点击子组件</button>
</template>
 
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
  let param={
    content:'b'
  }
  //传递给父组件
  emit('clickChild',param)
}
</script>


// 父组件代码

<template>
  <div class="hello">
  我是父组件
  <!-- clickChild是子组件绑定的事件，click是父组件接受方式 -->
   <Child  @clickChild="clickEven"></Child>
 <p>子组件传递的值是 {{result}}</p>
 </div>
</template>
 
<script setup>
import Child from './Child'
import {ref} from 'vue'
const result=ref('')
const clickEven=(val)=>{
  console.log(val);
  result.value=val.content
}
</script>
 

vue3路由传参

使用History隐藏参数

1.JSON.stringify(Json)需要把内容转换一下不然不能传
2. JSON.parse(history.state.data)接收时也需要转换一下
3.router.push中的 state 必须是这个名字，不能用query

<script lang="ts" setup>

import { useRouter } from 'vue-router'
const router = useRouter();


  router.push(
        { 
           path: "/List",
           state:
           {
               data:JSON.stringify(json)
           }
        })


<script>

子集接收

<script lang="ts" setup>

import { ref } from "vue";
const tableData = ref([]);

if (history.state.data) {
    tableData.value  = JSON.parse(history.state.data)
}

console.log(history.state);

<script>

vue3子组件实例方法暴露（导出）方法

vue2中可直接通过父组件内组件的ref读取子组件的实例，vue3有些许区别

vue3中需要在子组件中导出（暴露）相关实例（你需要再父组件中调用）

// 子组件：

const getFileList = () => {
  const addFile = getAddFileList();
  const delFile = getDelFileList();
  return { addFile, delFile };
};

//使用此属性导出实例方法
defineExpose({
  getFileList
});

// 父组件:

// 读取子组件实例方法
<MultiFileUpload
   ref="uploadFileRef"
 />
 const uploadFileRef = ref<any>();
 const getFileRef = () => {
  const fileData = uploadFileRef.value.getFileList();
  return fileData;
};

ps:这些是我之前翻博客，稀土等学习，和工作记下的，希望对大家有所帮助