前端之VUE开发学习

Shi_haoliu

已于 2024-04-09 10:05:28 修改

阅读量265

点赞数

文章标签： vue.js 前端学习

于 2023-04-11 16:42:42 首次发布

本文链接：https://blog.csdn.net/shi_haoliu/article/details/130087711

版权

vue知识点总结（开发，面试-Vue2）

Vue原理

双向绑定：（核心：数据驱动）
数据改变视图改变，视图改变数据改变
双向绑定是由数据劫持结合发布者－订阅者模式实现的 > Object.defineProperty()来劫持对象属性的setter和getter操作

Object.defineProperty(object,'ct',{
    set:function(value) {
    },
    get:function() {
        return ;
    }
});

Vue生命周期

创建前 beforeCreat()
创建后 created()
加载前 beforeMount()
加载后 Mounted()
更新前 beforeUpdata()
更新后 Updatad
销毁前 beforeDestory
销毁后 destoryed
生命周期内置方法 props > methods > data > computed > watch

Vue响应式原理（还是双向绑定）

v-model

什么是provide和inject

在Vue.js中，provide和inject是一对特殊的方法，用于在父组件中提供数据，然后在子组件中注入数据。通过使用provide和inject，我们可以实现在组件树中任意层次的组件之间进行数据的传递和共享。

provide方法是在父组件中定义的一个对象或者函数，用于向子组件提供数据。inject方法是在子组件中定义的一个对象，用于接收来自父组件的数据。通过在子组件中定义inject方法，并且将需要注入的数据作为inject方法的属性来实现数据的注入。

需要注意的是，provide和inject方法并不是响应式的，也不会进行深度监听，因此在使用时需要注意数据的变化和更新。

provide和inject的注意事项
在使用provide和inject方法时，有一些注意事项需要注意：

provide和inject方法是Vue.js的非公开API，可能会在未来的版本中发生变化或者被移除。
provide和inject方法只能在父组件和子组件之间进行数据的传递和共享，而无法在兄弟组件之间进行数据的共享。
provide和inject方法不是响应式的，也不会进行深度监听。如果需要在子组件中监听父组件提供的数据的变化，可以使用计算属性或者watch方法。
provide和inject方法不会对注入的数据进行类型检查和默认值设定，因此在使用时需要注意数据的类型和默认值。
provide和inject方法只有在组件初始化时才会进行数据的提供和注入。如果在组件初始化之后再进行provide和inject方法的调用，可能会导致数据无法正确地传递和共享。

原文链接：https://blog.csdn.net/2302_77835532/article/details/131104605

使用方法-路由-跳转

// 父级
<template>
  <div id="app">
    <router-view v-if="isLoad"></router-view>
  </div>
</template>

<script>

export default {
  name: 'app',
  provide() {
    return {
      reload: this.reloadView,
    };
  },
  data() {
    return {
      isLoad: true,
    };
  },
  methods: {
    reloadView(routeObj) {
      this.$router.push(routeObj);
      this.isLoad = false;
      this.$nextTick(() => {
        this.isLoad = true;
      });
    },
  },
};
</script>

// 子级
export default {
inject: ["reload"],
methods: {
	tolink(){
	 this.reload({
          name: 'routerLink',
          query: {aaa:'aaa',bbb:'bbb'}
        });
}
}

Vue语法糖

v-model
v-bind
v-on
修饰符
动态class，动态style等（：）
注册组件语法糖

Vue路由钩子

$router

Vue路由守卫（vue导航钩子vue-router）

路由守卫相当于一个全局的拦截器，想要进入必须通过匹配，作用是对路由进行权限控制

全局守卫
- 全局前置守卫：
  beforeEach（to，form，next）在路由跳转之前触发，主要用于登录验证，也就是路由还没跳转提前告知。
- 全局解析守卫：
  beforeResolve（to，form，next）这个守卫和前置守卫类似，也是路由跳转前触发，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，即在beforeEach和组件内beforeRouteEnter之后，afterEach之前调用
- 全局后置钩子：
  afterEach（to,from）和beforeEach相反，他是在路由跳转之后触发，它发生在beforeEach和BeforeResolve之后，beforeRouteEnter（组件内守卫）之前。这些钩子不会接受next函数也不会改变导航本身
独享守卫 >是指在单个路由配置的时候也可以设置的钩子函数
路由独享守卫：beforeEnter（to，form，next）和beforeEach完全相同，如果两个都设置了，beforeEnter则在beforeEach之后紧随执行。在路由配置上直接定义beforeEnter守卫
组件守卫 >是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数

Vue过滤器

filter Vue3中已废弃filter

mixin

相当于一个配置在全局的方法

Vue 配置文件

vue.config.js

devServer: {
  contentBase: path.join(__dirname, 'static'),    // 告诉服务器从哪里提供内容(默认当前工作目录)
  openPage: 'views/index.html',  // 指定默认启动浏览器时打开的页面
  index: 'views/index.html',  // 指定首页位置
  watchContentBase: true, // contentBase下文件变动将reload页面(默认false)
  host: 'localhost', // 默认localhost,想外部可访问用'0.0.0.0'
  port: 8080, // 默认8080
  inline: true, // 可以监控js变化
  hot: true, // 热启动
  open: true, // 启动时自动打开浏览器（指定打开chrome，open: 'Google Chrome'）
  compress: true, // 一切服务都启用gzip 压缩
  disableHostCheck: true, // true：不进行host检查
  quiet: false,
  https: false,
  clientLogLevel: 'none',
  stats: { // 设置控制台的提示信息
    chunks: false,
    children: false,
    modules: false,
    entrypoints: false, // 是否输出入口信息
    warnings: false,
    performance: false, // 是否输出webpack建议（如文件体积大小）
  },
  historyApiFallback: {
    disableDotRule: true,
  },
  watchOptions: {
    ignored: /node_modules/, // 略过node_modules目录
  },
  proxy: { // 接口代理（这段配置更推荐：写到package.json，再引入到这里）
    "/api-dev": {
      "target": "http://api.test.xxx.com",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": { // 将url上的某段重写（例如此处是将 api-dev 替换成了空）
        "^/api-dev": ""
      }
    }
  },
}

Vue-cli

vue 脚手架，用于快速搭建环境，处理带代码目录结构，项目结构，部署，热加载，单元测试