vue3相对vue2在写法上的一些改变

1、原型实例的挂载

// vue2
import Vue from "vue";
import axios from "@/util/axios-config.js";
Vue.prototype.$axios = axios;

// vue3
import { createApp } from 'vue'
import axios from "@/util/axios-config";
const app = createApp({})
app.config.globalProperties.$axios = axios

 

2、初始化

// vue2
import Vue from "vue";
import App from "./App.vue";
new Vue({
      render: h => h(App)
    }).$mount("#app");
          

// vue3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

 

3、新增<script setup>

<template>
  <div>
    {{ str }}
  </div>
</template>

<script setup>
import { ref } from "vue"
// 定义一个响应式的数据，可以直接使用，不需要return
const str = ref('3355')
setTimeout(() => {
  // 3秒后修改了str.value的值，页面也会更新
　// 修改使用ref创建的响应式数据需要使用该数据的.value，否则不会触发更新
  str.value = "str改变了"
}, 3000)
</script>

<style>

</style>

 

4、在setup中访问路由信息

<script setup>
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function tiDetail() {
  router.push({
    name: 'search',
    query: {
      ...route.query,
    },
  })
}
</script>

　　setup中没有this，不能像vue2那样直接使用this.$router来访问vue实例上的方法。

 

5、获取其他挂载到globalProperties的方法

// main.js
+ app.config.globalProperties.$name = 'xg'

　　其他组件获取

<script setup>
import { getCurrentInstance } from 'vue'
const vm = getCurrentInstance().appContext.config.globalProperties
console.log(vm.$name)
</script>

 

6、在setup中使用生命周期钩子

<script setup>
import { onMounted } from "vue"
onMounted(()=>{
  console.log('渲染完毕')
})
</script>

 

7、在setup中获取props和使用emit

　　在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的，因为defineProps 和 defineEmits不必声明，所以eslint规则可能会报错'defineProps' is not defined，此时可以用/* eslint-disable */和/* eslint-enable */让eslint检测跳过这段代码

// 父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  // 子组件，父组件向子组件传递数据msg，并且监听事件update:msg
  <HelloWorld :msg="msg" @update:msg="msg = $event" />
</template>

<script setup>
import { ref } from "vue"
import HelloWorld from './components/HelloWorld.vue'
let msg = ref('Welcome to Your Vue.js App')
</script>

<style>
</style>

// 子组件
<template>
  <div class="color">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script setup>
/* eslint-disable */
const props = defineProps({
  msg: String
})
// 创建自定义事件
const emit = defineEmits(['update:msg', 'loadend'])
/* eslint-enable */
setTimeout(() => {
  // 触发自定义事件，3秒后更新文本
  emit('update:msg', 'msg is update')
}, 3000)
</script>

<style scoped>
</style>

8、v-model的修改

　　可以加参数（v-model:msg = "msg"）和同一个组件绑定多个v-model，拿前面的第6点的代码说明，子组件不变，父组件修改如下，效果和6一样

// 父组件
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  // 子组件，父组件向子组件传递数据msg，并且监听事件update:msg
  <HelloWorld v-model:msg="msg" />
</template>

<script setup>
import { ref } from "vue"
import HelloWorld from './components/HelloWorld.vue'
let msg = ref('Welcome to Your Vue.js App')
</script>

<style>
</style>

　　绑定多个v-model

<HelloWorld v-model:msg="msg" v-model:title="title" />
// 相当于
<HelloWorld :msg="msg" @update:msg="msg = $event" :title="title" @update:title="title = $event" />

 

9、单文件组件的根template下可以使用多个节点元素

<template>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</template>

<script setup>
</script>

<style scoped>
</style>

 

10、状态驱动的动态css

　　单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上，并且在源值变更的时候响应式更新

<template>
  <div class="color">
    <h1>{{ str }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue"
let str = ref("666")
let red = ref("red")
setTimeout(() => {
  // 5秒后文本变为橙色的888
  red.value = "orange"
  str.value = 888
}, 5000)
</script>

<style scoped>
.color {
  color: v-bind(red);
}
</style>

　　v-bind的参数也可以是表达式，如v-bind('color.red')

<template>
  <div class="color">
    <h1>{{ str }}</h1>
  </div>
</template>

<script setup>
import { ref } from "vue"
let str = ref("666")
let color = ref({
  red: "red"
})
setTimeout(() => {
  // 5秒后文本变为橙色的888
  color.value.red = "orange"
  str.value = 888
}, 5000)
</script>

<style scoped>
.color {
  /* v-bind的参数也可以是表达式，如v-bind('color.red') */
  color: v-bind('color.red');
}
</style>

 

11、通过ref获取子组件setup中的数据

　　子组件setup中的数据默认是无法获取的，需要通过 defineExpose 方法暴露出去

// 子组件
<template>
  <div class="color">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script setup>
/* eslint-disable */
const props = defineProps({
  msg: String
})
// 暴露数据msg
defineExpose({
  msg: props.msg
})
/* eslint-enable */
</script>

<style scoped>
</style>

// 父组件
<template>
  <HelloWorld msg="hello msg"  ref="msgRef" />
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.msgRef.msg) // 打印hello msg
  }
}
</script>