vue3新特性

vue3新特性

vite

下一代前端开发与构建工具

通过vite创建vue3的项目

cnpm init vue@latest

修改vite的服务器以及端口号

vite.comfig.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: true,    //开启网卡访问
    port:8081   // 访问端口号
  }
})

安装对应的模块

yarn
cnpm i

启动 vue

yarn dev

组合式api

script setup

ref

<p>数字:{{ num }}</p>
    <p>字符串:{{ str }}</p>
    <button @click="fn1()">点我加数字</button>
    <button @click="fn2()">点我加改文字</button>

<script setup>
    import { ref,reactive } from 'vue'
    //通过ref实现相应的操作
const num = ref(10)
const str = ref('我是字符串')

function fn1() {
    //console.log(`output->num`, num)
    num.value++
}
function fn2() {
   str.value+="-"
}


</script>
    

reactive

<template>
   
    <ul>
        对象1:
        <li v-for="(item, index) in user1" :key="index">
            {{ index+""+item }}
        </li>
    </ul>

    <ul>
        对象2:
        <li v-for="(item, index) in user2" :key="index">
            {{ index+""+item }}
        </li>
    </ul>
    <button @click="fn31()">点我改对象1</button>
    <button @click="fn32()">点我改对象2</button>


    <p>数组:{{ arr }}</p>
    <button @click="fn41()">点我改数据</button>
   <button @click="fn5(1,$event)">加</button>
    <button @cllck="fn5(2,$event)">点我减数据</button>
</template>
    
<script setup>
    import { ref,reactive } from 'vue'
   

// 完成对象的修改
const user1 = ref({
    username: "admin",
    password:"123123"
})

const user2 = reactive({
    username: "admin",
    password:"123456"
})
function fn31() {
    //console.log(`output->user1`,user1)
    user1.value.username='heheh'
}
function fn32() {
    //console.log(`output->user2`,user2)
   user2.username='hahah'
}


// 数组的操作
const arr = reactive([1,2.4])
function fn41() {
    arr[1]+=111
}
function fn5(type,e) {
    // console.log('e',e);
    if (type == 1) {
        arr.push(123)
    } else {
        arr.shift()
    }
    
}

</script>
    
<style>
    
</style>

监听

<template>
      <h1>生命周期和运算监听</h1>  
      <p>钱数：{{ money }}</p>
      <button @click="fn1">修改数字</button>
      <p>数组：{{ arr }}</p>
      <p>arr[0]{{ arrNum }}</p>
      <p>arr[2]{{ arrobj }}</p>
      <p>数组的长度：{{ length }}</p>
      <button @click="fn14">修改长度</button>
      <button @click="fn15">修改值</button>
      <button @click="fn16">修改对象</button>


</template>
    
<script setup >
import {ref, onMounted,computed, reactive, watch } from 'vue'
// 使用生命周期， create  不能使用
onMounted(() => {
        console.log('====调用了生命周期1======');
        
})
onMounted(() => {
        console.log('====调用了生命周期2========');
        
})
// 计算属性
const num = ref(10)
const money = computed(() => {
    return '￥'+num.value+'元'
})
function fn1() {
    num.value++
}

// 监听
const arr = reactive([1,2,{name:"ze"}])
const length = ref(3)
watch(arr, (nv, ov) => {
    console.log(`output->nv`,nv)
    console.log(`output->ov`,ov)
    length.value = arr.length
    arrNum.value = arr[0]
    arrobj.value=arr[2].name
})
function fn14() {
    arr.push(null)
}
const arrNum = ref(arr[0])
function fn15() {
    arr[0]++
}
const arrobj=ref('')
function fn16() {
    arr[2].name='hahaha'
}
</script>
    
<style>
    
</style>

父子组件

defineProps([prop])

<template>
    <h1>父组件</h1>
    <Test32 msg="我是写死的" :obj="obj" @go="ego($event)" @to="eto"/>
</template>
    
<script setup >
import { reactive } from 'vue'
import Test32 from './Test32.vue'
const obj = reactive({
    username: "zeng",
    age: "120"
})
function ego(e, v) {
    console.log(`output->e`, e)
    console.log(`output->v`,v)
    
}
function eto(val) {
    console.log(`output->val`,val)
}
</script>
    
<style>
    
</style>

<template>
        <h1>这是子组件</h1>
        <p>{{ msg }}</p>
        <p>{{ obj }}</p>
        <button @click="go">go</button>
        <button @click="to">to</button>

</template>
    
<script setup >
    // 定义属性
const props = defineProps(['msg', 'obj'])
    // 定义事件
    const emits = defineEmits(['go', 'to'])
function go() {
    emits('go',111)
}
function to() {
    emits('to',props.msg)
}
    
</script>
    
<style>
    
</style>