VUE2.0版本学习笔记

Vue2.0 学习笔记

脚手架安装

npm install -g @vue/cli
vue create vue2-practice
# 选择2.0版本

如果执行中遇到错误，yarn 的错误
certificate has expired
则执行

yarn cache clean
yarn config set strict-ssl false

cd vue2-practice
npm  run serve
# 初学者建议安装vscode插件
# 在插件中搜搜 @id:vue.volar
# 点击安装

学习前的问题记录

❓：v-if 和 v-show 的区别
💡：

❓：怎样实现单页面应用，使用 loayout ➕ router 配置
💡：

❓：数据绑定 v-model 和 v-bind 的区别 ,

 💡：双向绑定和单向绑定，双向绑定 同时变化 单向绑定 这边变化那边不变化（input），

❓：v-bind 是不是只能绑定 element 属性上的值 v-model 默认 element 的 value/checked 属性

💡：是 

❓：v-model.trim lazy number

 💡：在转化的时候可以进行特殊处理很耐斯

❓：组件中定义 props 可以定义类型 但是使用地方却不给提示有哪些参数，组件中绑定某些值需要通过 v-bind :list="list"
💡：

❓：类型定义怎么更全面点呢

   props: {
    msg: String,
    list: Array,
  },

💡：

❓：生命周期 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

💡：生命周期使用打印 props 的值发现在 beforeCreate 中函数不执行（报错），this.list 拿不到这个值到值 

❓：计算属性，用于处理某个数据的计算需要执行复杂的逻辑，将这个变量处理为一个新的变量并返回，只有当我们里面的属性值变化我们计算属性才会重新执行，且计算使用 v-model 将其绑定在 input 中，也不会重新执行，他的变化只和里面的值有关

💡：跟计算属性的 get/set 有关系，默认是 get 属性，如果设置 set 属性函数则可以通过 set 修改 计算属性监听的值从而达到修改这个值的目的
 

   /* 计算属性 如果要处理一个数据我们可以在这里进行处理防止在{{}}中写太多逻辑 */
  computed: {
    /* 计算属性的getter */
    maxInputerValue: {
      get: function () {
        return this.inputvalue + '我是计算属性运行的结果'
      },
      set: function (val) {
        console.log(val.split('我是计算属性运行的结果'));
        this.inputvalue = val.split('我是计算属性运行的结果')[0]
      }
    }
  }

❓：计算属性 vs 侦听属性
💡：
计算属性能做的：

计算属性通常用于同步的数据计算和派生状态。这些派生值会基于其响应式依赖进行缓存，并且只会在依赖项改变时重新计算。

派生数据：当某个值需要根据其他响应式数据计算得出时。

复用逻辑：当多个地方需要同样的计算逻辑时。

性能优化：计算属性基于缓存工作，所以只有依赖变化时才会重新计算，适合用于开销较大的计算。

监听器能做的：
当你需要在数据变动时执行副作用，例如异步操作、调用外部方法、或者对数据变动有额外的逻辑判断时，监听器是更合适的选择。

副作用：在响应数据变化时，如保存数据、发送请求、操作 DOM 等。

异步操作：当你需要对数据变化作出响应，并执行某些异步操作（例如 AJAX 请求）时。

条件触发：你可能只想在满足特定条件时才对数据变化做出响应。
监控非响应式数据：监听器还可以监控 Vue 实例中的非响应式属性。

交叉场景：
虽然计算属性和监听器都可以用于响应数据变化，但某些场景可能看起来它们都能处理。比如，你可能使用计算属性来派生一个新值，并在它的 setter 中执行副作用。类似地，你也可以通过监听器来实现依赖其他值的计算。

不过，将监听器用于大量数据计算或者在监听器中进行计算并返回值并不是最佳实践。通常来说：

如果是同步操作并且需要输出一个值，使用计算属性。
如果是处理副作用、异步操作，使用监听器。

结论：

确实，很多使用监听器可以完成的任务，计算属性也能够应对——特别是当涉及同步操作和派生状态时。然而，计算属性的主要目的并不是处理异步操作或副作用，而侦听器则擅长于处理这些场景。各自在其用例中提供了可读性和维护性上的优势。因此，即使有很多交叉点，使用计算属性或监听器应该基于它们各自的优势来考虑。

❓：官方案例 在生命周期中声明一个防抖函数，在监听中调用，
💡：

/* 生命周期 */
   created() {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 300)
    this.guojie = 'test'
  },
  /* 监听 */
  watch: {
    questions: function () {
      this.answers = 'loading...'
      this.debouncedGetAnswer()
    }
  }

❓：v-show vs v-if

 💡：v-show 只是通过 css 样式进行覆盖 v-if 是会对组件进行销毁和重建，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销，频繁切换使用 v-show ，条件很少改变使用 v-if

列表渲染

❓：v-for

 💡：类似于 for in 循环，可以遍历数组、对象，绑定节点key关键字优化 
 ` Vue 1.x 的 track-by="$index"`，
 使用基本类型去做 key，可直接使用变更数组/替换数组，
 `此处有一个启发式方法，高效实现替换操作`

❓：v-for 与 v-if 不推荐一同使用

💡：v-for 优先级高于 v-if，v-for 遍历完毕后 v-if 才会执行，so you know!

❓：is 的理解和用法

💡：使用 is 属性指定当前元素应该被解析为哪个组件。在这里，CardComponent 是自定义组件的名称。 

<ul>
  <li
    is="CardComponent"
    v-for="item in list"
    :key="item.name"
    :item="item"
    :name="item.name"
    :age="item.age"
  ></li>
  <CardComponent
    v-for="item in list"
    :key="item.name"
    :item="item"
    :name="item.name"
    :age="item.age"
  />
</ul>

事件处理

❓：使用 v-on 进行监听 也可以简写成 @ ，这种用法可以自定义事件名称，进行函数的传递，在子组件中可以使用 this.$emit('自定义事件名称', 自定义参数)进行调用

💡：子组件调用父组件的方法可以直接使用props，父组件调用子组件的方法可以直接使用$emit 

❓：$listener

💡：`$listeners` 对象包含了在组件上使用 v-on 绑定的所有的事件监听器,不包括 .native 修饰符绑定的事件监听器,可以将所有的事件监听器传递给子组件 

❓：.native 修饰符被用于监听组件根元素的原生事件，不是组件内部使用 v-on 定义的自定义事件

💡：根元素的原生事件

插槽

❓： 和

💡： 默认 name 是 default, 一个组件中可以有多个插槽，插槽的传递都需要通过<template></template>进行传递 v-slot:插槽名称或者#插槽名称 方式进行渲染，有例外， 

独占默认插槽的缩写语法

 <current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

动态组件&异步组件

❓：

💡：让失活的组件保持状态 

❓：返回一个 promise resolve 一个组件

💡：在使用处可以进行 require 也可以结合 webpack code-split 进行代码分割 

others

❓：访问根实例 $root 一个小型的布局全局数据管理工具

💡：可以直接获取到 data computed method 中的属性或方法，小型可以使用大型使用 vuex 

❓：访问父级组件实例 $parent 从一个子组件访问父组件的实例

💡：可替代将数据以 prop 的方式传入子组件的方式

❓：访问子组件实例或子元素 ref
e：

 💡： 使用 this.$refs.usernameInput ， ref 和 v-for 配合使用，是数组

❓：依赖注入 provide inject , 我们在父组件想让多个子组件调用父组件的函数，我们不能使用 $parent 写太多不好维护

💡：我想把 provideAlert 这个函数提供给每个子组件 
 /* 父组件 */
   provide: function () {
    return {
      provideAlert: (callback) => {
        this.callbackfun = callback
      }
    }
  }

  /* 子组件 注入这个函数 我们在页面初始化的时候可以调用这个函数将我们子组件的函数传递给父组件（ps: 也算是子组件能调用父组件的函数一个方法） */
    inject: ['provideAlert'],
    mounted: function () {
        var that = this;
        that.provideAlert(this.callbackfun)
    }

❓：组件之间的循环引用
💡：

 /* 1 解决： beforeCreate 时去注册 */
 beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
/* 2 解决：使用 webpack 的异步 import */
components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

❓：问题： 循环引用 ，react 提示和处理
💡：待办

可复用性

❓：自定义指令 类似于 react 自定义 hook
💡：

// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
});