Vue3项目创建和使用

dpbs

已于 2022-05-06 11:15:03 修改

阅读量1.1k

点赞数

文章标签： vue

于 2022-04-20 17:49:04 首次发布

本文链接：https://blog.csdn.net/dpbs_/article/details/124277920

版权

项目创建

本文选用Vite搭建Vue3.x版本项目，详细内容可参考官方资料。

1.cmd执行命令：

npm init vite@latest

2.按照命令提示选用vue，运行完成项目就创建好了。

3.进入项目导入依赖：

npm i

4.运行项目：

npm run dev

项目创建完毕。

Vue3.x的使用

语法格式

使用上有多种语法格式，点击了解格式。

钩子函数

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // 挂载前
    })
    onMounted(() => {
      // 挂载后
    })
    onBeforeUpdate(() => {
      // 更新前
    })
    onUpdated(() => {
      // 更新后
    })
    onBeforeUnmount(() => {
      // 卸载前
    })
    onUnmounted(() => {
      // 卸载后
    })
    onActivated(() => {
      // 缓存路由激活
    })
    onDeactivated(() => {
      // 缓存路由卸载
    })
    onErrorCaptured(() => {
      // 错误捕获
    })
  }
}

响应式api

reactive

reactive() 函数接收对象返回响应式对象。

toRefs

toRefs() 函数可以将reactive()创建出来的响应式对象，转换为普通对象。

<script>
	import { reactive, toRefs } from 'vue'
	export default {
		setup(props, context) {
		        let Main= reactive({
		             id: 0
		        });
		        return { ...toRefs(Main) };
		 }
	}
</script>

ref

ref()函数接收一个参数值，返回一个响应式的数据对象。

<script>
	import { ref } from 'vue'
	export default {
		setup(props, context) {
		        let num = ref(100);
                console.log(num.value);//100
                num.value=200;
                console.log(num.value);//200
                return { num  };
		 }
	}
</script>

toRef

toRef() 创建一个ref类型数据, 并和以前的数据关联。

computed

computed() 用来计算属性。

<template>
  {{num}}
  {{double}}
  <button @click="add">add</button>
</template>

<script>
import { reactive, toRefs, computed} from 'vue'
export default {
  setup(props, context) {
    let Main=reactive({
      num:10,
      double : computed(() => Main.num * 2),
      add:()=>{
        Main.num++;
      }
    })
    return { ...toRefs(Main) };
  }
}
</script>

watch

第一个参数监听的对象，第二个参数回调函数，第三个参数包含深度监听(监听复杂对象)和立即执行的配置。

<template>
  {{num}}
  <button @click="add">add</button>
  <button @click="stop">stop</button>
</template>

<script>
import { reactive, toRefs, watch} from 'vue'
export default {
  setup(props, context) {
    let Main=reactive({
      num:10,
      add:()=>{
        Main.num++;
      }
    })
    const unwatch = watch(
        ()=> Main.num,
        (newVal, oldVal) => {
          console.log(oldVal);
          console.log(newVal);
        },
        { deep: true, imediate: true }
    );
    const stop = () => {
      unwatch();
    };
    return { ...toRefs(Main) ,stop};

  }
}
</script>

provide（提供）与inject（注入）

层级复杂时父组件向子孙组件提供方法等。

模板 Refs

<template>
  <div ref="divRef"></div>
  //还可以应用到组件上从而对子组件进行操作
</template>

<script>
import {nextTick, ref} from 'vue'
export default {
  setup(props, context) {
    const divRef=ref()
    nextTick(()=>{
      console.log(divRef.value.clientWidth)
    })
    return { divRef };
  }
}
</script>