DOM节点挂载前

onBeforeMount(() => {
  console.log('DOM节点挂载前');
})

DOM节点挂载后

onMounted(() => {
  console.log('DOM节点挂载后');
})

更新前

onBeforeUpdate(() => {
  console.log('更新前');
})

更新后

onUpdated(() => {
  console.log('更新后');
})

卸载前

onBeforeUnmount(() => {
  console.log('卸载前');
})

卸载完成后

onUnmounted(() => {
  console.log('卸载完成后');
})

示例：

点击右侧的字母，滚动到具体的位置，先给右侧的标题绑定点击事件，拿到点击的元素，在通过scrollIntoView方法进行滚动
{ behavior: "smooth" }是平滑滚动属性

    <div class="aside">
        <ul>
            <li @click="clickAZ(item)" v-for="(index, item) in abclist.list" :key="item">{{ item }}</li>
        </ul>
    </div>
    <div class="bscroll">
        <ul class="index">
            <li v-for="(index, item) in abclist.list" :key="item">
                <h2 :id="item">{{ item }}</h2>
                <div class="span">
                    <span :class="{ 'active': datalist.cityname == item }" @click="span(item)" v-for="(item, v) in index"
                        :key="v">
                        {{ item }}</span>
                </div>
            </li>
        </ul>
    </div>

JS

let clickAZ = (key) => {
    console.log(key);
    let element = document.getElementById(key);
    element.scrollIntoView({ behavior: "smooth" });
}

CSS

body,html{
    height: 100%;
}
.bscroll {
    height: 100%;
    overflow: scroll;
}
.index{
    height: 100%;
}

1.首先配置路径信息，已经单独写过一篇了 点击前往

2.引入包文件

import { useRouter } from 'vue-router'

3.定义变量接一下useRouter实例

let router = useRouter()

4.使用router.push() 进行跳转（）里面为path地址

router.push('/index')

1.引入包文件

import { createRouter, createWebHashHistory } from 'vue-router';

2.引入组件地址，也可以使用懒加载引入

import Home from '../views/Home.vue';//引入模式

3.配置路由数组

const routes = [
    { path: '/', component: Home },
    { path: '/info', component: () => import('../views/Info.vue') },
];

4.创建路对象

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

5.暴露出去

export default router

6.在main.js中引入使用

const app = createApp(App) // 创建Vue应用程序实例，并传入根组件App
app.use(router)
app.mount('#app') // 将应用程序挂载到页面上的#app元素

7.App.vue中放置出口

<router-view />

完整示例：

ruoter.js

// 配置路由文件
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';
// 配置路由数组
const routes = [
    { path: '/', component: Home },
    { path: '/info', component: () => import('../views/Info.vue') },
];
// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes,
});
// 暴露对象
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
const app = createApp(App) // 创建Vue应用程序实例，并传入根组件App
app.use(router)
app.mount('#app') // 将应用程序挂载到页面上的#app元素

App.vue

<template>
  <router-view /> 
</template>

子传父：子组件用defineEmits传递

//子组件
<template>
    <div>
        <button @click="btn">我的按钮</button>
    </div>
</template>

<script setup>
import { ref } from "vue"

let sex = ref(2000)
let $emit = defineEmits(['sex'])
let btn = () => {
    $emit('sex', sex.value)
}
</script>

//父组件
<template>
  <div>
    <MyButton @sex="fys" />
  </div>
</template>

<script setup>
let fys = (val) => {
  console.log(val);
}
</script>

父传子： 使用defineProps来接收

//父组件
<template>
    <MyButton :msg="access" />
</template>

<script setup>
let access = '今天天气不错'
</script>

//子组件
<template>
    <div>
        <button>我的按钮</button>
        {{ props.msg }}
    </div>
</template>

<script setup>
const props = defineProps({
    msg: {
        type: String,//参数类型
        required: true,//是否必传
        default: '天气状态' //默认值
    }
});
</script>

简化版传递

父传子 世界使用defineProps(['参数名1'],[‘参数名2’])方式来接收

//父组件
<template>
  <div>
    <MyButton sex="2000" />
  </div>
</template>

//子组件
<template>
    <div>
        <button>我的按钮</button>
    </div>
</template>

<script setup>
let props = defineProps(['sex'])
console.log(props.sex);
</script>

子传父 使用$emit在标签上面直接传递参数 @click="$emit('msg', aa)" msg为事件名，aa为参数

//子组件
<template>
    <div>
        <button @click="$emit('msg', aa)">我的按钮</button>

    </div>
</template>

<script setup>
let aa = '天气不错'
</script>

//父组件
<template>
    <MyButton @msg="as" />
</template>

<script setup>
let as = (val) => {
    console.log(val);
}
</script>

在Vue项目中，你可以通过以下步骤来使用jsconfig.json文件

1. 在你的Vue项目的根目录下创建一个名为jsconfig.json的文件。

2. 在jsconfig.json中添加以下配置：

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

上述配置的含义是：

• target：指定编译器的目标版本，这里设为ES6。
• module：指定模块的导入导出规范，这里设为ES模块。
• baseUrl：指定相对于jsconfig.json文件的路径。
• paths：用于设置别名，例如@代表src文件夹，可以根据实际情况进行配置。
• exclude：指定需要排除的文件或文件夹，这里排除了node_modules和dist文件夹。

3. 保存jsconfig.json文件。

4. 接下来，你可以在你的Vue项目中使用别名来引用模块。例如，如果你有一个在src文件夹下的components文件夹，并且你在components文件夹中有一个Header.vue组件，你可以使用别名来引用它：

import Header from '@/components/Header.vue';

这里的@符号是之前在jsconfig.json中设置的别名，它指向了src文件夹，所以@/components/Header.vue实际上指向了src/components/Header.vue文件。

需要注意的是，jsconfig.json文件只在开发过程中起作用，对于构建打包后的代码是没有影响的。如果你使用的是Webpack等打包工具，你可能还需要相应的配置来解析别名。

Vue2的双向数据绑定原理及缺陷

利用订阅-开发者模式，vue初始化时会用Object.defineProperty()给data中的每一个属性添加getter和setter,同时创建dep和watcher进行依赖收集与派发更新，最后通过diff算法对比新老vnode的差异，通过patch即时更新。

Vue2使用Object.defineProperty()的缺陷是什么？

1. 一次性递归到底开销很大，如果数据很大，大量的递归导致调用栈溢出
2. 不能监听对象的新增属性和删除属性
3. 当监听的下标对应的数据发生改变时，无法正确的监听数组的方法
4. vue中通过重写了7个能够改变原数组的方法来进行数据监听

简洁说明：

无法对新添加或删除的属性进行监听、无法监听数组的变化

1. pop: 移除并返回数组的最后一个元素。

2. push: 向数组末尾添加一个或多个元素，并返回新数组的长度。

3. shift: 移除并返回数组的第一个元素。

4. unshift: 向数组开头添加一个或多个元素，并返回新数组的长度。

5. reverse: 颠倒数组中元素的顺序（第一个元素变为最后一个，最后一个变为第一个）。

6. sort: 对数组元素进行排序，默认按字符串Unicode码点进行排序。

7. splice: 在指定位置修改数组，可以删除、替换或添加新元素，并返回被删除的元素数组。

vuex的五个状态

//1.存储数据
  state: {

  },

//2.修改数据
  mutations: {

  },

3.运算属性
  getters: {

  },

4.//异步（发送请求） 
  actions: {

  },

5.模块化
  modules: {

  }

使用方法:

存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '野马')
        }
    },
}

发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },