vue3中的各种引入及其使用

main.js

import { createApp } from 'vue'
import App from './App'
import store from './store'
import router from './router'

import 'element-plus/theme-chalk/index.css'
import ElementPlus from 'element-plus'//引入饿了么组件
import * as echarts from 'echarts'// 引入echarts

const app = createApp(App)

app.config.globalProperties.$echarts = echarts
app.use(router)
app.use(store)
app.use(ElementPlus)//引入饿了么组件
app.mount('#app')

watch监听

const number = ref(0)
const msg = ref('没修改数据')
let obj = reactive({
  name: '小明在上课'
})
let fzobj = reactive({
  name: '111',
  obj: {
    name: '小东在上课'
  }
})
// 双向监听
watch([number,msg], (newValue, oldValue) => {
  console.log("双向new", newValue, "old", oldValue);
})
// 单向监听
watch(number, (newValue, oldValue) => {
  console.log("单向new", newValue, "old", oldValue);
})
// 复杂监听 深度监听且oldValue会展示成和newValue一样
// watch(obj, (newValue, oldValue) => {
//   console.log("复杂new", newValue, "old", oldValue);
// })
// 复杂监听 监听对象的单个属性就不会了
watch(()=>obj.name, (newValue, oldValue) => {
  console.log("复杂new", newValue, "old", oldValue);
})
// 深度监听且oldValue会展示成和newValue一样
// watch(()=>fzobj.obj, (newValue, oldValue) => {
//   console.log("复杂new", newValue, "old", oldValue);
// },{deep:true})
watch(()=>fzobj.obj.name, (newValue, oldValue) => {
  console.log("复杂new", newValue, "old", oldValue);
})

vue中的引入

<script setup>
  import { useRouter } from "vue-router"  // 引入userRouter
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'

  const store = useStore()
  const router = useRouter()//router.currentRoute._value.xxx拿到路由传参的值
  const emit = defineEmits()// emit('传参',a)
  const a = ref(null)
  const b = reactive({
    b1: '',
    b2: []
  })
  onMounted(()=>{// 初始化进入
  })
  function add(){}
  onst add1 = () => {}
  //ElMessage({
  //  message: 'xxx成功',
  //  type: 'success',
  //})
  //ElMessage.error('xxx失败')
</script>