vue的基本知识点总结

Vue.js 是一种用于构建用户界面的 JavaScript 框架。它采用了 MVVM（Model-View-ViewModel）的架构模式，通过数据绑定和组件化的方式，使开发者能够更轻松地构建可扩展的应用程序。

基本语法和示例

插值：使用双大括号{{}}在模板中进行插值，将数据绑定到视图中。

<div>
  {{ message }}
</div>

指令：Vue.js提供了一些内置的指令，用于添加特定的行为和功能。

1.v-bind：将元素的属性与数据进行绑定。

<img v-bind:src="imageUrl">

 2.v-if：根据条件来渲染元素。

<div v-if="showMessage">
  {{ message }}
</div>

3.v-for：根据数据列表循环渲染元素。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

4.计算属性：使用计算属性可以根据现有的数据计算出新的属性，并在模板中进行使用。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }

vue3的响应式原理

vue3的响应式原理是由ES6新增的 proxy代理实现的，并且增加了setup 组合式api。

启动方式为：

createApp(App).use(store).use(router).mount("#app")

全局方式：

app.config.globalProperties.$http = axios;

 Vue2与Vue3基本相同

01 生命周期基本一致

02 与vue2的模板语法基本一致

03 与选项基本一致 data methods，computed watch 一致

不同点
（1）vue3 可以有多个根节点
（2）vue2 只能有一个根节点

数据绑定： Vue.js 提供了双向数据绑定的能力，可以将数据与 DOM 元素进行动态绑定。例如：

<div id="app">
      <p>{{ message }}</p>
      <input v-model="message" type="text">
</div>

<script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
</script>

条件渲染： Vue.js 提供了 v-if 和 v-show 指令用于根据条件来控制元素的显示与隐藏。例如：

<div id="app">
  <p v-if="showMessage">Hello Vue!</p>
  <button @click="toggleMessage">Toggle Message</button>
</div>

<script>
        new Vue({
          el: '#app',
          data: {
               showMessage: true
              },
          methods: {
            toggleMessage() {
              this.showMessage = !this.showMessage;
            }
          }
        });
</script>

列表渲染： Vue.js 提供了 v-for 指令用于遍历数组或对象并渲染相应的元素。例如：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  }
});
</script>

组件化开发： Vue.js 允许将页面拆分为多个可重用的组件，使代码更加模块化和可维护。例如：

<div id="app">
      <my-component></my-component>
</div>

<script>
        Vue.component('my-component', {
          template: '<p>Hello from My Component!</p>'
        });

    new Vue({
      el: '#app'
    });
</script>

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性。Vuex 的核心概念包括 state（状态）、mutations（突变）、actions（动作）和getters（获取器）

定义状态： 在 Vuex 中，我们通过定义一个包含各种应用状态的 state 对象来管理数据。例如：

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

修改状态： 要修改 Vuex 中的状态，我们需要使用 mutation

Composition API： Vue.js 3 引入了 Composition API，它提供了一种新的组织和复用代码逻辑的方式。相比于传统的 Options API，Composition API 允许将逻辑按功能进行组织，使代码更具可读性和可维护性。例如：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { reactive } from 'vue';

    export default {
      setup() {
        const state = reactive({
          count: 0
        });

        const increment = () => {
          state.count++;
        };
    
        return {
          ...state,
          increment
         };
      }
    };
</script>

在 Vue 中，组件之间的参数传递可以通过 props、事件和 provide/inject 来实现。下面是对这些传参方式的总结及代码示例：

Props（属性传递）： Props 是一种父组件向子组件传递数据的方式。子组件通过 props 接收父组件传递过来的数据。

父组件：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent Component'
    };
  }
};
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

事件（自定义事件）： 通过自定义事件，子组件可以向父组件传递数据或触发父组件的方法。示例：

父组件：

<template>
  <div>
    <child-component @childEvent="handleChildEvent"></child-component>
    <p>Message from Child Component: {{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

子组件 ChildComponent.vue：

<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', 'Hello from Child Component');
    }
  }
};
</script>

Provide/Inject（依赖注入）

vue3中 路由是一个重要的概念，用于管理页面之间的导航和状态。

1.安装和配置路由：首先，需要安装并配置Vue Router。可以使用npm或yarn安装Vue Router，并在Vue应用的入口文件中进行配置。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

2.路由配置：路由配置是指定义应用中的各个路由以及它们对应的组件。可以通过routes选项来配置路由。每个路由对象都包含path和component属性，用于指定路径和对应的组件。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]

3.路由跳转：可以通过编程式导航或声明式导航来实现路由跳转。

• 编程式导航：使用router.push方法实现编程式导航。

• // 在方法中跳转
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }

• 声明式导航：在模板中使用<router-link>组件实现声明式导航。

• <router-link to="/about">About</router-link>

4.动态路由：动态路由是指根据不同的参数值加载不同的组件。可以通过在路由配置中使用冒号（:）来定义动态路径参数。

const routes = [
  { path: '/user/:id', component: User }
]

 5.嵌套路由：嵌套路由是指在一个组件中包含子组件的路由配置。可以通过在父组件的路由配置中使用children选项来定义子路由。

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: '', component: UserProfile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

在父组件的模板中使用<router-view>来渲染子组件。

Vue3 的组合式 API 是一种新的 API，它提供了一种新的方式来编写 Vue 组件。它是通过使用函数来组合逻辑，并且将逻辑从组件中提取出来，从而使得组件更加集中于渲染和交互。

组合式 API 的主要特点包括：

1. 更好的类型推导：由于组合式 API 是基于函数的，因此可以更容易地获得类型推导。

2. 更好的代码复用：由于我们可以将逻辑从组件中提取出来，因此可以更好地实现代码复用。

3. 更好的测试：由于逻辑已经被提取出来，我们可以更容易地编写测试代码，从而提高代码的可测试性。

在Vue中，全局路由守卫是一种机制，用于在路由导航过程中对特定的路由进行拦截和处理。全局路由守卫可以用来进行权限验证、登录状态检查、日志记录等操作。Vue提供了四个全局路由守卫：

beforeEach：在每个路由导航之前被调用，可以用来进行权限验证、登录状态检查等操作。

router.beforeEach((to, from, next) => {
  // 进行权限验证或其他操作
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

 beforeResolve：在每个路由导航被确认之前被调用，和beforeEach类似，但是在导航解析之后被调用。

router.beforeResolve((to, from, next) => {
  // 在导航解析之后进行一些操作
  next()
})

 afterEach：在每个路由导航之后被调用，可以用来进行日志记录等操作

router.afterEach((to, from) => {
  // 进行日志记录或其他操作
})

 在全局路由守卫中，可以使用next函数来控制路由导航的行为。可以调用next()继续导航，也可以调用next(false)取消导航，或者调用next('/path')重定向到其他路径。