Vue笔记

1.基础知识

1. Vue项目中使用单文件组件SFC， 将组件的逻辑 （JavaScript）、模板 （HTML） 和样式 （CSS） 封装在单个文件中。
2. Options API与 Composition API的区别
   ● Options API 以“组件实例”的概念为中心（如示例所示），对于来自 OOP （面向对象）语言背景的用户，它通常与基于类的模型更一致。通过抽象出响应式细节并通过option组强制实施代码组织，它也更适合初学者。
   ● Composition API 的核心是直接在函数作用域中声明反应状态变量，并将多个函数的状态组合在一起以处理复杂性。它更自由，需要了解响应式在 Vue 中的工作原理才能得到有效利用。作为回报，它的灵活性为组织和重用逻辑提供了更强大的模式。
3. v-html和v-text的区别
   ● v-html 指令的作用：设置元素的innerHTML，内容中有html结构会被解析为标签
   ● v-text指令无论内容是什么，只会解析为文本
   ● 解析文本使用v-text,需要解析html结构使用v-html
4. 动态参数
   这里将作为JavaScript表达式动态计算，其计算值将用作参数的最终值
   动态参数的计算结果应为字符串，但null除外

<a v-bind:[attributeName]="url"> ... </a>
<!-- shorthand -->
<a :[attributeName]="url"> ... </a>

5. 动态参数
   Vue中$的用法
   ● 可以用来表示变量,var $s='ass'
   ● 区分自定义属性/方法和实例属性/方法

//$watch是一个实例方法
vm.$watch('counter',function (nval,oval) {
//将在counter发送改变后调用
alert('计数器值的变化：'+oval+'变为'+nval+'!');
})

6. 计算属性computed、watch以及methods的区别
   ● watch
   ○ 听名字大概就知道了，watch就是用来监听变化
   ○ watch和computed的第一个区别就是他没有缓存，数据发生变化，便执行一次
   ○ 第二个区别就是在watch在第一次渲染页面时不加载，而computed在第一次渲染页面时要加载
   ● methods
   ○ 众所周知其是vue中的方法；
   ○ 里面的函数的特性是随时调用随时执行，简称随叫随到，你叫我三次，我就答应三声。
   ● computed
   ○ 计算属性是根据其响应式依赖项缓存的。计算属性仅在其某些响应式依赖项发生更改时才会重新评估。
   ○ 这意味着只要没有更改，多次访问将立即返回先前计算的结果，而无需再次运行 getter 函数。
   ○ 计算属性仅支持 getter
   ○ 使用场景：当一个属性受多个属性影响的时候，需要使用computed
   ○ computed和methods不同的地方在于，computed有缓存，也就是说，只有当数据变化，并且再次调用他，他才会被执行，两个条件缺一不可
   ○你可以认为这个属性非常懒惰，不给钱不干活。举个例子：当data中数据没有变化时，调用n次，只会执行一次computed，也就是最开始的那次（首次渲染调用），其余n-1次使用缓存
   ○ 用法如下：

<h2>{{fullName}}</h2>
data: {
    firstName: 'Lebron',
    lastName: 'James'
  },
  // computed: 计算属性()
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  },

7. 使用数组和对象来应用类<div :class="[{ active: isActive }, errorClass]"></div>
   对象中类的存在将由数据属性的布尔值决定。
   $attrs：组件具有多个根元素，则需要定义哪个元素将接收此类。

<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<my-component class="baz"></my-component>

8. v-if 和v-show的区别
   ● v-show不支持template元素
   ● v-if如果条件在初始渲染时为假，不会做任何事情，条件块不会被渲染，直到条件第一次变为真。
   ● v-show无论初始条件如何，元素始终呈现，并具有基于CSS的切换
   ● v-if具有较高的切换成本，v-show而具有较高的初始渲染成本
9. key的作用
   ● key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点
   ● 在写v-for的时候，都需要给元素加上一个key属性
   ● key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）

2.组件知识

1. 使用对象绑定多个属性

如果要将对象的所有属性作为 props 传递，可以使用不带参数的 v-bind。例如，给定一个对象：v-bind:prop-namepost

export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}

以下模板：

<BlogPost v-bind="post" />

将等效于：

<BlogPost :id="post.id" :title="post.title" />

2.插槽

插槽用于将模板片段传递给子组件，并让子组件在其自己的模板中呈现该片段

<FancyButton>
  Click me! <!-- slot content -->
</FancyButton>

<button class="fancy-btn">
  <slot></slot> <!-- slot outlet -->
</button>

该元素是一个槽出口，指示应将父级提供的槽内容呈现到的位置。

最后渲染的 DOM：

<button class="fancy-btn">
  Click me!
</button>

槽内容无权访问子组件的数据。通常，请记住：

父模板中的所有内容都在父范围内编译;子模板中的所有内容都在子作用域中编译

3.命名插槽

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件中

<BaseLayout>
  <template v-slot:header>
    <!-- content for the header slot -->
  </template>
</BaseLayout>

3.可重用

1.添加和清理 DOM 事件侦听器的逻辑提取到它自己的可组合中

// event.js
import { onMounted, onUnmounted } from 'vue'

export function useEventListener(target, event, callback) {
  // if you want, you can also make this
  // support selector strings as target
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

简化后：

// mouse.js
import { ref } from 'vue'
import { useEventListener } from './event'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  useEventListener(window, 'mousemove', (event) => {
    x.value = event.pageX
    y.value = event.pageY
  })

  return { x, y }
}

2.钩子参数

指令钩子传递以下参数：

el：指令绑定到的元素。这可用于直接操作 DOM。

binding：包含以下属性的对象。

• value：传递给指令的值。例如，在 v-my-directive="1 + 1中，值将为 "2
• oldValue：上一个值，仅在 beforeUpdate和 updated中可用。无论值是否已更改，它都可用。
• arg：传递给指令的参数（如果有）。例如，在 v-my-directive:foo中，参数将为"foo" 。
• modifiers：包含修饰符（如果有）的对象。例如，在 v-my-directive.foo.bar中，修饰符对象将是 { foo: true, bar: true }
• instance：使用指令的组件的实例。
• dir：指令定义对象。
• vnode：表示绑定元素的基础 VNode。
• prevNode：表示上一个渲染中的绑定元素的 VNode。仅在 beforeUpdate和 updated挂钩中可用。

例如，请考虑以下指令用法：

<div v-example:foo.bar="baz">

该参数将是一个对象，其形状为：binding

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

4.内置组件

1.基于 CSS 的过渡

v-enter-from：回车的起始状态。在插入元素之前添加，在插入元素后删除一帧。

v-enter-active：回车处于活动状态。在整个进入阶段应用。在插入元素之前添加，在过渡/动画完成时删除。此类可用于定义进入过渡的持续时间、延迟和缓动曲线。

v-enter-to：回车的结束状态。在元素插入后添加一帧（同时删除），v-enter-from在过渡/动画完成时删除。

v-leave-from：休假的开始状态。触发离开过渡时立即添加，在一帧后删除。

v-leave-active：休假活动状态。在整个离开阶段应用。触发离开过渡时立即添加，在过渡/动画完成时删除。此类可用于定义离开过渡的持续时间、延迟和缓动曲线。

v-leave-to：休假的结束状态。在触发离开过渡后添加一帧（同时删除），在过渡/动画完成时删除。v-leave-from

v-enter-active: 并使我们能够为进入/离开v-leave-active过渡指定不同的缓动曲线

2.JavaScript Hooks

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

export default {
  // ...
  methods: {
    // called before the element is inserted into the DOM.
    // use this to set the "enter-from" state of the element
    onBeforeEnter(el) {},

    // called one frame after the element is inserted.
    // use this to start the animation.
    onEnter(el, done) {
      // call the done callback to indicate transition end
      // optional if used in combination with CSS
      done()
    },

    // called when the enter transition has finished.
    onAfterEnter(el) {},
    onEnterCancelled(el) {},

    // called before the leave hook.
    // Most of the time, you shoud just use the leave hook.
    onBeforeLeave(el) {},

    // called when the leave transition starts.
    // use this to start the leaving animation.
    onLeave(el, done) {
      // call the done callback to indicate transition end
      // optional if used in combination with CSS
      done()
    },

    // called when the leave transition has finished and the
    // element has been removed from the DOM.
    onAfterLeave(el) {},

    // only available with v-show transitions
    onLeaveCancelled(el) {}
  }
}