vue3的技术使用（部分）

注：本文章主旨对于新入门的伙伴，在vue2的基础上对vue3的使用有一定的理解和使用。

介绍：

在vue3中，不需要根标签div 如图：

<template>
  <div @click="fn1">我是子组件</div>
  <span>{{ "这是父组件的数据" }}</span>
 /* <span>{{ mystr }}</span>
  <span>{{ myid }}</span>
  <span>{{ str }}</span>*/
</template>

<script>
import { onMounted } from "vue";
export default {
  props: ["mystr", "myid", "str"],
  setup(props,  next ) {
    let str1 = null;
    console.log(props, 111);
 
    let fn1 = () => {
      console.log(next);
      next.emit("fn",8888);
    };
    onMounted(h=>{
       next.emit("fn",'执行 next.emit("fn",8888);');
    })
    return {
      fn1,
    };
  },
};
</script>

<style></style>

好了下面是如何创建项目：

项目的安装和启动

1、安装 vite

npm install -g create-vite-app

2、vite创建vue3项目 （建议使用，运行块）

npm init vite-app 项目名

3、安装依赖项目运行

-进入项目

cd 项目名

-安装依赖

npm i 
//或
npm install

 -运行项目

npm run dev

vue3路由的安装

npm安装

npm install vue-router@4

//文件的配置
//创建router文件夹 index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {//建议使用懒加载
    path: '/about',
    name: 'about',
    component: () => import('../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

//app.vue设置 router-view  路由出口

//main.js 全局使用路由
import router from './router'
//使用 use 路由
createApp(App).use(router).mount('#app')

vue3 xueX状态仓库的安装

npm install vuex@next --save

创建一个store文件夹 modules开启子模块  index.js主文件

//index.js
import { createStore } from 'vuex'

//引入分包
import noe from "./modules/noe";
export default createStore({
  // state: {
  // },
  // getters: {
  // },
  // mutations: {
  // },
  // actions: {
  // },
  modules: {//使用子模块
    noe
  }
})

//modules文件夹 noe.js子仓库
export default {
    //开启命名
    namespaced: true,
    state: {
        goodsList: [],
        twodata: 'two模块数据',
        name: "zhangsan"
    },
    mutations: {
        changeGoodsList(state, data) {
            state.goodsList = data
            console.log('执行了changeGoodsList');
        },
        changeTwo(state, data) {
            state.twodata = '修改之后的值'
            console.log('changeTwo');
        }
    },
    actions: {
        // actions的方法第一形参代表上下文对象
        getGoodsList(context) {
            console.log();
            // 需要将获取的商品赋值给goodsList
            // 调用mutations的方法
            context.commit('changeGoodsList', [1, 2, 3, 4, 5])
            console.log('getGoodsList');
        }
    },
    getters: {
        total(state) {
            return state.goodsList.length
        },
        total1(state) {
            return state.name + 333
        }
    }
}


//main.js
import store from './store'
//使用store
createApp(App).use(store).use(router).mount('#app')

其他的需求 插件就不在列了。需要可以去官网找找

生命周期

关于setup()内使用生命周期的改变
import{onBeforeMount}from'vue'
 beforeMount() ---onBeforeMount(()=>{console.log('onBeforeMount')})
  mounted() ---onMounted()
  beforeUpdate() ---onBeforeUpdate()
  updated() ---onUpdated()
  beforeUnmount() ---onBeforeUnmount()
  unmouted() ---onUnmouted()

自定义hook

//类似于mixin方法，复用代码，组合api。

创建一个hooks文件夹，创建usePoint.js
export default function () {
    import{onBeforeMount,onBeforeUnmount,reactive}from'vue'
    let point = reactive({
        x: 0,
        y: 0
    })
    //实现鼠标“打点”相关的方法
    function savePotint(event) {
        point.x = event.pageX;
        point.Y = event.pageY;
        console.log(event.pageX, event.pageY);
    }
    //挂载完成
    onMounted(() => {
        window.addEventListener('click',savePotint)
    })
    //卸载之前
    onBeforeUnmount(() => {
        window.removeEventListener('click',savePotint)
    })
    retuen point
}

index.vue
//引入hooks，使用即可

setup()

setup（）定义数据和方法，需要使用return返回
setup的参数
-props：值为对象，组件外传递的数据，组件内声明定义接受的属性
-context：上下问对象
	1、attrs：值为对象，组件外部传递过来，但是在props配置中声明的属性，相当对this.$atrs
	2、slots：接受插槽的内容,相当于this.$solts
	3、emit：分发自定义事件的函数，相当于this.$emit

ref()

import {ref} form 'vue'
//定义基本和复杂数据类型（建议基本数据） 进行响应式
let name=ref("张三")

//模板使用不需要.value，操作时需要.value
//更改数据时 name.value=“666”

toRef

//可以把值返回成ref形式，只能处理一次数据
import{toRef}from 'vue'
const name=toRef(person，'name') 

toRefs

返回ref属性，可以批量操作

创建一个ref对象，其value值指向另一个对象的某个属性

<div>{{name}}</div>

import{toRefs}from 'vue'
setup(){
    const obj={
        name:'zhangsan',
        age:30
    }
    return{
        //使用toRefs转成ref形式
        ...toRefs(obj)
    }
}

reactive()

//定义object array数据类型 响应
import {reactive}form "vue"
//代理对象
let obj=reactive({
    anme:"fg",
    age:30
})

//操作数据和模板读取都不需要.value
obj.name="fg"

readonly

让一个响应式的数据只读(深只读)

shallowReadonly

让一个响应式的数据只浅读

toRaw

将一个由reactive生成的响应式对象转换为普通对象。用于读取对象的普通对象，对这个的普通对象的所有操作，不会引起页面更新。

markRaw

标记一个对象，使其用于不会成为响应式对象。有些值不应该被设置为响应式，例如复杂的第三方类库等。

computed()

//引入
import {computed}'vue'
computed()计算属性

//简写
let person=reactive({
firstName="zhang"
,lastName="3"
})

//计算属性（没有考虑计算属性被修改的情况）
/*person.fullName=computed(()=>{
return person.firstNaame+"-"+person.tlastName
})*/

//计算属性（完整的情况）
person.fullName=computed({
 get(){
return person.firstName+"-"+person.tlastName
}),
set(value){
const nameArr=value.split("-")
person.firstName=nameArr[0]
person.firstName=nameArr[1]
}
}

//返回数据
return {
person
}

watch

监听ref定义的响应数据
监听reactive定义的响应式数据时，deep不生效
监听reavtive定义的响应式数据中的某个属性时：deep生效
import {ref,reactive,watch}from'vue'


//场景一：监听ref所定义的一个响应式数据
/*
	watch(sumName,(newVlaue,oldValue)=>{
	console.log('sumName变了'，newValue，oldValue)
	},{immediate:true})
*/
//场景2：监听ref所定义的多个数据
watch([sumName,msg],(newVlaue,oldValue)=>{
	console.log('sumName或msg变了'，newValue，oldValue)
	},{immediate:true})
//场景3 监听reactive定义的一个响应式数据，（注：1、此处无法正确的获取oldValue。2、强制开启了深度监视deep：true）
watch(sumName,(newVlaue,oldValue)=>{
	console.log('sumName或msg变了'，newValue，oldValue)
	},{deep:false})//此处的deep无效
//场景4、监视reactive定义的响应式数据的某个属性
watch(()=>person.name,(newVlaue,oldValue)=>{
	console.log('person.name变了'，newValue，oldValue)
	})
//场景5 、监听某些属性
watch([()=>person.name,()=>person.age],(newVlaue,oldValue)=>{
	console.log('person.name变了'，newValue，oldValue)
	})

watchEffect()

智能监听

//此方法可以不用指明监听谁，用到谁监听谁，不需要返回值。
import{watchEffect}from'vue'
watchEffect(()=>{
    const x1=sum.value;
    const x2=person.job.j1.salary;
    console.log('watchEffect所监听的回调函数')
})

组件通讯

//父传子
<template>
  <div>我是父组件{{str}}</div>
  <son mystr="1111" myid="666" :str="str" @fn="fn"></son>
</template>
​
<script>
import { ref } from "vue";
import son from "./son.vue";
​
export default {
  components: {
    son,
  },
  setup(prpos, { next }) {
    const str = ref("zhangsna");
    console.log(str);
    let fn = (n) => {
        console.log('woshifuzujain 777',n);
    };
    return {//返回数据
      str,
      fn
    };
  },
};
</script>
​
<style></style>
​
//子组件
<template>
  <div @click="fn1">我是子组件</div>
  <span>{{ "这是父组件的数据" }}</span>
  <span>{{ mystr }}</span>
  <span>{{ myid }}</span>
  <span>{{ str }}</span>
</template>
​
<script>
import { onMounted } from "vue";
export default {
    //需要props接收
  props: ["mystr", "myid", "str"],
  setup(props,  {emit} ) {//
    let str1 = null;
    console.log(props, 111);
 
    let fn1 = () => {
        //调用方法
      emit("fn",8888);
    };
    return {
      fn1,
    };
  },
};
</script>
​
<style></style>

###

祖先数据传递

//provide

//实现祖孙组件间的通讯，给自己的后代组件传递数据。

//provide(要传的名字，要传的数据)

import{reactive,toRefs,provide}from'vue'
import Child from'./components/Child.vue'
setup(){
    let car=reactive({name:"zhangsan",price:'40w'})
    provide('car',car)//要传的数据
return{...toRefs(car)}
    }
###

inject

后代组件获取祖先数据

import{inject}from'vue'
setup(){
    let car=inject('car')//接收祖先数据
    console.log(car)
}

###

响应式数据的判断

isRef //检查值是否为ref对象
isReactive //检查一个对象是否为reactive创建的响应式代理
isReadonly //检查一个对象是否有readonly创建的只读
isProxy //检查一个对象是否由reactive或readonly方法创建的代理
 isRef()//true
 isReactive()//true
 isReadonly()//true
 isProxy()//true

###

传送门

//要传送到哪里 body
<teleport to="body">
    ...
</teleport>

$naxtTick()

//在下一次DOM更新后执行指定的回调

this.$nextTick(function(){
    //更新后执行的代码
})

###

router

注：在vue3中没有this这个属性

//引入
import {useRouter}from'vue-router';
//赋值路由
setup(){
    const router =useRouter()//router===this.$router
    
    //路由跳转
    const handleChangePage=(id)=>{
        router.push(`/detail/${id}`)
    }
}
//引入
import {useRoute}from'vue-router';
//赋值路由
setup(){
    const router =useRoute()//router===this.$route
    
    //路由参数接收
   onMounted(()=>{
       console.log(route.params.id)
   })
}

###

vuex

import {useStore}from"vuex"//从vue3中获取你需要的操作方法
​
setup(){
    const store =useStore()
    onMounted(()=>{
        //调用vuex的方法
        store.commit('函数名')
    })
}

###

好了以上就是某些语法的使用，学会这些基本入门了。