一文带你看懂vue基础语法、生命周期、指令、监听器、依赖注入、插件

最新推荐文章于 2024-07-09 21:18:14 发布

局外人LZ

最新推荐文章于 2024-07-09 21:18:14 发布

阅读量587

点赞数 21

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/randy521520/article/details/136994892

版权

前端同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820174
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88820178
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820523
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88845681

一、简介

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的设计目标是通过简单、灵活的 API 提供高效的数据驱动视图层渲染。本文主要针对script setup讲解
以下是 Vue.js 的一些特点和优势：
1.简洁易用：Vue.js 的 API 简单易懂，容易上手，使开发者能够快速构建交互性强、动态的用户界面。
2.响应式数据绑定：Vue.js 使用双向数据绑定和虚拟 DOM 技术，能够自动追踪数据变化并更新视图，使开发者能够更容易地管理和维护应用的状态。
3.组件化开发：Vue.js 支持组件化开发，将页面拆分为多个独立的组件，每个组件负责自己的视图和逻辑，有利于代码复用和维护。
4.灵活性：Vue.js 提供了诸多灵活的特性，如指令、计算属性、过滤器等，使开发者能够根据需求选择合适的工具进行开发。
5.生态系统丰富：Vue.js 生态系统庞大丰富，拥有大量的插件、工具和第三方库，能够满足各种不同需求。
6.性能优化：Vue.js 通过虚拟 DOM 和 diff 算法优化了页面渲染性能，同时提供了一些性能优化的工具和指导，帮助开发者提升应用的性能。

二、vue基本语法

1.模板语法与v-html指令

<template>
  <div>
    <p>{{text}}</p>  //普通文本
    <span v-html="html"></span> //html
  </div>
</template>

<script setup>
const text = 'hello word';
const html = '<span>我是div</span>'
</script>

2.声明响应式状态ref、reactive

<template>
  <div>
    <p>响应式ref：{{refText}}</p>
    <p>响应式reactive：{{reactiveObj.count}}</p>
    <button v-on:click="onTextChange">改变文本</button>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
;
const refText = ref('refText'); //Ref 可以持任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，建议使用
const reactiveObj = reactive({count:0}); //只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

const onTextChange = ()=>{
  refText.value =' refText change';
  reactiveObj.count++
}

</script>

3.计算属性： computed，不使用计算属性每次重新渲染组件时，都会重新计算这个表达式的值；计算属性具有缓存机制，只有在 author.books 发生变化时，才会渲染组件

基本使用

<template>
  <div>
    <p>不使用计算属性：{{ author.books.length > 0 ? 'Yes' : 'No' }}</p>
    <p>使用计算属性：{{ publishedBooksMessage }}</p>
    <button @click="onChange">改变值</button>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";

const author = ref({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
});

const onChange = ()=>{
  author.value.books = []
}

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.value.books.length > 0 ? 'Yes' : 'No'
})
</script>

4.可写的计算属性，计算属性默认是只读的，如果在某些特殊场景需要修改计算属性，可以使用getter 和 setter

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

5.动态绑定class

<template>
  <div>
    <div class="no_active" :class="{ active: isActive }">基本使用</div>
    <div class="no_active" :class="classObj">绑定对象</div>
    <div class="no_active" :class="classComputed">绑定计算属性</div>
    <div :class="['no_active',isActive ? 'active' : '']">绑定数组</div>
    <button @click="onChange">改变样式</button>
  </div>
</template>
<style lang="scss" scoped>

.no_active{
  color: #333333;
}

.active{
  color: red;
}
</style>

<script setup>
import {computed, ref} from "vue";
const isActive  = ref(false);
const classObj = ref({
  active: false
});
const classComputed = computed(() => ({
  active: isActive.value
}))

const onChange = ()=>{
  isActive.value = !isActive.value;
  classObj.value.active = !classObj.value.active;
}
</script>

6.动态绑定style

<template>
  <div>
    <div :style="{ color: activeColor }">基本使用</div>
    <div :style="styleObj">绑定对象</div>
    <div :style="classComputed">绑定计算属性</div>
    <div :style="[styleObj]">绑定数组</div>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">添加前缀</div>
    <button @click="onChange">改变样式</button>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
const activeColor = ref('#333333')
const styleObj = ref({
  color: '#333333'
});
const classComputed = computed(() => ({
  color: activeColor.value
}))

const onChange = ()=>{
  activeColor.value = 'red';
  styleObj.value.color = 'red';
}
</script>

三、vue逻辑指令

1.条件渲染，v-if每次切换都换重新渲染，v-show只在初始化渲染。如果需要频繁切换，则使用 v-show 较好，很少切换使用v-if最好

v-if、v-else、v-else-if根据条件渲染内容，支持在 template上使用

<template>
  <div>
    <div v-if="type == 301">请求重定向</div>
    <div v-else-if="type == 404">资源未找到</div>
    <div v-else>请求成功</div>
    <button @click="onChange">改变请求状态</button>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
const type = ref(200);
const onChange = ()=>{
  const array = [200,301,404];
  const randomIndex = Math.floor(Math.random() * array.length);
  const randomValue = array[randomIndex];
  type.value = randomValue
}
</script>

v-show根据条件渲染内容，不支持在上使用，v-show会在dom中保留该玄素，只是切换了元素的display

<template>
  <div>
    <div v-show="type == 301">请求重定向</div>
    <div v-show="type == 404">资源未找到</div>
    <div v-show="type == 200">请求成功</div>
    <button @click="onChange">改变请求状态</button>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
const type = ref(200);
const onChange = ()=>{
  const array = [200,301,404];
  const randomIndex = Math.floor(Math.random() * array.length);
  const randomValue = array[randomIndex];
  type.value = randomValue
}
</script>

2.循环渲染v-for，支持在上使用；v-if 和 v-for不能同时使用，当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高

渲染列表

<template>
  <div>
    <ol>
      <li v-for="item in itemArray">
        {{ item.message  }}
      </li>
    </ol>
    <ul>
      <li v-for="(item,index) in itemArray">
        {{ index+1  }}、{{ item.message  }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref} from "vue";
const itemArray = ref([{ message: 'Foo' }, { message: 'Bar'}])

</script>

渲染对象

<template>
  <div>
    <ol>
      <li v-for="item in info">
        {{ item }}
      </li>
    </ol>
    <ul>
      <li v-for="(item,key,index) in info">
        {{ index+1  }}、{{key}}：{{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref} from "vue";
const info = ref({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
});


</script>

通过 key 管理状态，Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表，当数据改变vue不会移动domw，而是在原有的元素上重新渲染；属性key可以跟踪每个节点的标识，从而重用和重新排序现有的元素，提高性能。

<template>
  <div>
    <ol>
      <li v-for="item in info" :key="{item}">
        {{ item }}
      </li>
    </ol>
    <ul>
      <li v-for="(item,key,index) in info" :key="{key}">
        {{ index+1  }}、{{key}}：{{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import {ref} from "vue";
const info = ref({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
});


</script>

四、vue事件处理

1.v-on或@绑定事件

<template>
  <div>
    <p>count：{{count}}</p>
    <button @click="count++">点击改变</button>
    <button v-on:click="onChange">点击改变 v-on</button>
    <button @click="onChange">点击改变@</button>
    <button @click="onAdd(2)">点击改变Add</button>
  </div>
</template>

<script setup>
import {ref} from "vue";
const count = ref(0);
const onChange = (event)=>{
  console.log(event)
  count.value++
}

const onAdd = (nu)=>{
  count.value+=nu;
}

</script>

2.事件修饰符

<template>
  <div>
    <!--    @click.stop阻止事件冒泡-->
    <div @click="console.log('阻止事件冒泡')">
      <p>count：{count}</p>
      <button @click.stop="onStop">.stop阻止事件冒泡</button>
    </div>
    <!--    .prevent阻止事件默认行为-->
    <a href="https://www.baidu.com" @click.prevent="onPrevent">.prevent阻止事件默认行为</a>
    <!--    .self用于限制事件只在事件触发的元素自身上触发，而不是在其子元素上触发-->
    <div style="border:1px solid red;width: 500px;height:80px" @click.self="onSelf">
      <button>.self用于限制事件只在事件触发的元素自身上触发，而不是在其子元素上触发</button>
    </div>
    <!--    @click.stop阻止事件冒泡-->
    <button @click.once="onOnce">.once只触发一次</button>
    <!--    .capture事件捕获-->
    <div @click.capture="onCapture('外部先处理')">
      <button @click="onCapture('内部后处理')">.capture事件捕获</button>
    </div>
    <!--     @scroll.passive触摸事件的监听器-->
    <div @scroll.passive="onScroll" style="border:1px solid red;width: 500px;height:80px;overflow: auto;">
      <p style="width: 200px;height:100px">
        .passive修饰符一般用于触摸事件的监听器
      </p>
    </div>
    <!--    链式操作-->
    <div @click="console.log('阻止事件冒泡')">
      <a href="https://www.baidu.com" @click.stop.prevent="onPrevent">.prevent阻止事件默认行为</a>
    </div>
  </div>
</template>

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

const count = ref(0);
const onStop = (event) => {
  count.value++
}
const onPrevent = () => {
  console.log('.prevent阻止事件默认行为')
}
const onSelf = (event) => {
  console.log(event.target)
}
const onOnce = () => {
  console.log('只触发一次')
}
const onCapture = (text) => {
  console.log(text)
}
const onScroll = () => {
  console.log('滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成')
}
</script>

3.键盘按键修饰符

<template>
  <div>
    <p>
      enter：<input @keyup.enter="onkeyup('enter键')" />
    </p>
    <p>
      tab：<button @keyup.tab="onkeyup('tab键')">tab键</button>
    </p>
    <p>
      Delete、Backspace：  <input @keyup.delete="onkeyup('Delete和Backspace键')" />
    </p>
    <p>
      esc： <input @keyup.esc="onkeyup('esc键')" />
    </p>
    <p>
      space：<input @keyup.space="onkeyup('space键')" />
    </p>
    <p>
      up： <input @keyup.up="onkeyup('up键')" />
    </p>
    <p>
      down：<input @keyup.down="onkeyup('down键')" />
    </p>
    <p>
      left： <input @keyup.left="onkeyup('left键')" />
    </p>
    <p>
      right：<input @keyup.right="onkeyup('right键')" />
    </p>
    <p>
      ctrl+其他键：<input @keyup.ctrl="onkeyup('ctrl键')" />
    </p>
    <p>
      alt+其他键：<input @keyup.alt="onkeyup('alt键')" />
    </p>
    <p>
      shift+其他键：<input @keyup.shift="onkeyup('shift键')" />
    </p>
    <p>
      window+其他键：<input @keyup.meta="onkeyup('window键')" />
    </p>
    <p>
      链式操作Alt + Enter：<input @keyup.alt.enter="onkeyup('Alt + Enter键')" />
    </p>
    <p>
      .exact：<button @click.ctrl.exact="onkeyup('.exact修饰符')">当用户按下 Ctrl 键并单击按钮时，事件处理程序将被触发</button>
    </p>

  </div>
</template>

<script setup>
const onkeyup = (name)=>{
  console.log(name)
}
</script>

4.鼠标按键修饰符

<template>
  <div>
    <button @click.middle="onMouse('鼠标中间键')">鼠标中间</button>
    <button @click.left="onMouse('鼠标左键')">鼠标左键</button>
    <button @click.right="onMouse('鼠标右键')">鼠标右键</button>
  </div>
</template>

<script setup>
const onMouse = (name)=>{
  console.log(name)
}
</script>

五、vue双向数据绑定v-model

1.基本用法

<template>
  <div>
    <p>Message is: {{ message }}</p>
    <input v-model="message">
  </div>
</template>

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

const message = ref('双向数据绑定');
</script>

2.复选框

<template>
  <div>
    <div>Checked names: {{ checkedNames }}</div>

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
  </div>
</template>

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

const checkedNames = ref(['Jack']);
</script>

3.单选

<template>
  <div>
    <div>Picked: {{ picked }}</div>

    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>
  </div>
</template>

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

const picked = ref('One');
</script>

4.select选择器

<template>
  <div>
    <div>Selected: {{ selected }}</div>

    <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

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

const selected = ref('A');
</script>

六、vue声明周期

1.onMounted(callback)：组件被挂载到 DOM 后调用。
2.onUpdated(callback)：组件更新后调用，DOM 重新渲染之后。
3.onUnmounted(callback)：组件被卸载或销毁之前调用。
4.onBeforeMount(callback)：组件挂载之前调用。
5.onBeforeUpdate(callback)：组件更新之前调用，DOM 重新渲染之前。
6.onBeforeUnmount(callback)：组件卸载或销毁之前调用。
7.onErrorCaptured(callback)：捕获子组件生命周期钩子中的错误。
8.onRenderTracked(callback)：在渲染函数跟踪时调用。
9.onRenderTriggered(callback)：在渲染函数触发时调用。
10.onActivated(callback)：keep-alive 组件被激活时调用。
11.onDeactivated(callback)：keep-alive 组件被停用时调用。
12.onServerPrefetch(callback)：在服务器端渲染期间调用，用于数据预取。

七、vue监听器

1.watch(source,callback,options)

source： ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组
callback：回调函数
options：watch配置

flush：用于指定 watcher 的刷新时机，pre变化前执行回调、post变化后执行回调、sync变化后立即执行回调
immediate：表示是否立即执行 watcher 回调函数。如果设置为 true，则在监听开始时立即执行回调函数。
deep：表示是否深度监听被观察的数据，即是否递归监听对象内部值的变化。
once：表示是否只监听一次变化，即只触发一次回调函数。

基本使用

<template>
  <div>
    <button @click="onXChange">x改变</button>
    <button @click="onYChange">y改变</button>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";

const x = ref(0);
const y = ref(0);

const onXChange = ()=>{
  x.value++
}

const onYChange = ()=>{
  y.value+=2
}

// 单个 ref
watch(x, (newValue,oldValue) => {
  console.log(`x值已改变，新值：${newValue}，旧值：${oldValue}`)
})

// getter 函数
watch(
    () => x.value + y.value,
    (newValue,oldValue) => {
      console.log(`x+y值已改变，新值：${newValue}，旧值：${oldValue}`)
    }
)

// 多个来源组成的数组
watch([x, () => y.value], (newValues,oldValues) => {
  console.log(`x或y值改变，，新值：${newValues}，旧值：${oldValues}`)
})
</script>

监听对象

<template>
  <div>
    <button @click="onCountChange">count改变</button>
    <button @click="onAgeChange">age改变</button>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from "vue";

const obj = reactive({ count: 0, age:0 })

const onCountChange = ()=>{
  obj.count++
}

const onAgeChange = ()=>{
  obj.age++
}

//监听某一属性值
watch(()=>obj.count,(newValue,oldValue)=>{
  console.log(`count已改变，新值：${newValue}，旧值：${oldValue}`)
})

//deep强制转成深层侦听器，虽然只监听了count，但是deep为true，当obj其他属性改变也会触发
watch(()=>obj.count,(newValue,oldValue)=>{
  console.log(`只监听count，deep:true，新值：${newValue}，旧值：${oldValue}`)
},{deep:true})

//监听某一属性值，使用ref时需配置deep参数
watch(obj,(newValue,oldValue)=>{
  console.log(`obj已改变，新值：${JSON.stringify(newValue)}，旧值：${JSON.stringify(oldValue)}`)
})

</script>

2.watchEffect(callback,options))可以自动跟踪回调的响应式依赖，当callback中的某个响应式改变就会触发回调，监听不了对象和计算属性

options：watch配置

flush：用于指定 watcher 的刷新时机，pre变化前执行回调、post变化后执行回调、sync变化后立即执行回调

使用案例

<template>
  <div>
    <div>count：{{obj.count}}</div>
    <div>age：{{obj.age}}</div>
    <div>sum：{{sum}}</div>
    <button @click="onCountChange">count改变</button>
    <button @click="onAgeChange">age改变</button>
    <button @click="onSumChange">sum改变</button>
  </div>
</template>

<script setup>
import {reactive, watchEffect, ref} from "vue";

const obj = reactive({ count: 0, age: 0 })
let sum = ref(0);

const onCountChange = () => {
  obj.count++
}

const onAgeChange = () => {
  obj.age++
}

const onSumChange = () => {
  sum.value++
}

watchEffect(() => {
  console.log('watchEffect监听不了对象：',obj)
})
watchEffect(() => {
  console.log('count改变：',obj.count)
})
watchEffect(() => {
  console.log('age改变：',obj.age)
})
watchEffect(() => {
  console.log('sum改变：',sum.value)
})
</script>

3.watchPostEffect(callback)：watchEffect() 使用 flush: ‘post’ 选项时的别名。
4.watchSyncEffect(callback)：watchEffect() 使用 flush: ‘sync’ 选项时的别名。

八、vue ref妙用模板引用

<template>
  <div>
    <input ref="input" />
    <ul>
      <li v-for="item in list" ref="itemRefs">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
const list = ref([1,2,3,4])

const itemRefs = ref([])

const input = ref();
onMounted(()=>{
  input.value.focus();
  console.log(itemRefs.value)
})
</script>

九、vue指令

1.v-html：将元素的 innerHTML 设置为指定的 HTML。
2.v-show：根据表达式的真假值切换元素的显示与隐藏。
3.v-if：根据表达式的真假值条件性地渲染元素。
4.v-else：用于 v-if 的后续兄弟元素，表示前一个 v-if 条件不成立时渲染。
5.v-else-if：用于 v-if 的后续兄弟元素，表示前一个 v-if 条件不成立时进一步判断是否渲染。
6.v-for：基于源数据多次渲染元素或模板块。
7.v-on：绑定事件监听器，用于监听 DOM 事件，或者使用@。
8.v-bind：动态地绑定一个或多个特性，或一个组件 prop，或者使用:。
9.v-model：在表单控件或组件上创建双向数据绑定。
10.v-text：将元素的文本内容设置为指定的值，或者使用{{}}。
11.v-pre：跳过这个元素和它的子元素的编译过程。

<template>
  <div>
    <span v-pre>{{ this will not be compiled }}</span> //直接渲染文本，不进行编译{{ this will not be compiled }}
  </div>
</template>

12.v-once：只渲染元素和组件一次，count改变不会重新渲染，一直是初始值

<template>
  <div>
    <span v-once>count: {{count}}</span>
    <div v-once>
      <h1>comment</h1>
      <p>count: {{count}}</p>
    </div>
    <button @click="onChange">点击改变</button>
  </div>
</template>
<script setup>
import {ref} from "vue";

const count = ref(0);

const onChange = ()=>{
  count.value++;
}

</script>

13.v-memo：类似于 computed，但是只有在相关依赖项发生变化时才重新计算，只有count、age变化才会重新渲染。只有sum改变不会重新渲染

<template>
  <div>
    <div v-memo="[count, age]">
      <p>count：{{count}}</p>
      <p>sum：{{sum}}</p>
      <p>age：{{age}}</p>
    </div>
    <button @click="onCountChange">点击改变count</button>
    <button @click="onAgeChange">点击改变age</button>
    <button @click="onSumChange">点击改变sum</button>
  </div>
</template>
<script setup>
import {ref} from "vue";

const count = ref(0);
const sum = ref(0);
const age = ref(0);

const onCountChange= ()=>{
  count.value++;
}

const onAgeChange = ()=>{
  age.value++;
}

const onSumChange = ()=>{
  sum.value++;
}

</script>

14.v-cloak：在 Vue 实例编译结束前隐藏插值标签，防止出现闪烁的情况，直到编译完成前，

将不可见。

<template>
  <div>
    <div v-cloak>
      {{ message }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
</style>
<script setup>
import {ref} from "vue";

const message = ref('hello word');
</script>

15.v-slot：用于具名插槽分发内容，需和组件使用

十、vue自定义指令

1.基本使用

<template>
  <div>
    <input v-focus />
  </div>
</template>

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

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 钩子中可用。

const myDirective = {
  // 在绑定元素的 attribute 前或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {},
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件，及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件，及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

3.全局自定义指令

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.directive('focus',{
    mounted: (el) => el.focus()
})

app.mount("#app");

<template>
  <div>
    <input v-focus />
  </div>
</template>

十一、vue依赖注入，一般用于多层级组件嵌套，props传参

一般用于多层级组件嵌套，props传参情况。组件嵌套时，可能某些组件使用不到某些props，但是其他嵌套组件会用到，所以没用到props的组件仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，使用provide 和 inject可以解决该问题
1.父组件注册依赖

<template>
  <div>
    <Demo/>
  </div>
</template>

<script setup>
import Demo from "@components/Demo.vue";
import {provide} from "vue";

provide('message', {text: '请求错误'})
</script>

2.子数组件使用依赖

<template>
  {{message.text}}
</template>

<script setup>
import {inject} from "vue";

const message = inject('message')
</script>

3.注册全局依赖

import {createApp} from "vue";
import App from "./App.vue";

const app = createApp(App);

app.provide('message', {text: '请求错误'})

app.mount("#app");

十二、vue内置的特殊属性

1.key：在比较新旧节点列表时用于识别 vnode。
2.ref：用于注册模板引用。
3.is：用于绑定动态组件

<table>
  <tr is="vue:my-row-component"></tr>
</table>

十三、vue工具函数

1.isRef(): 判断一个值是否为 ref 创建的响应式对象。
2.unref(): 如果参数是 ref 创建的响应式对象，则返回其内部值；否则返回参数本身。
3.toValue(): 如果参数是 ref 创建的响应式对象，则返回其内部值；否则返回参数本身。
4.toRef(): 将一个响应式对象的属性转换为 ref 创建的响应式对象。
5.toRefs(): 接收一个响应式对象，返回一个包含该对象所有属性的 ref 对象的普通对象。
6.isProxy(): 判断一个对象是否是由 Vue 的响应式系统创建的代理对象。
7.isReactive(): 判断一个对象是否是由 Vue 的响应式系统创建的响应式对象。
8.isReadonly(): 判断一个对象是否是由 Vue 的响应式系统创建的只读代理对象。
9. readonly:(): 创建一个只读的响应式代理对象，该对象是一个只读的、不可修改的响应式对象，要避免深层级的转换行为，使用 shallowReadonly() 替代

<template>
  <div>
    <div>
      <p>count：{{obj.count}}</p>
    </div>
    <button @click="onCountChange">点击改变count</button>
  </div>
</template>
<script setup>
import {reactive, readonly, watchEffect} from "vue";

const obj = reactive({ count: 0 });
const copyObj = readonly(obj)

const onCountChange= ()=>{
  obj.count++;
}

watchEffect(()=>{
  console.log(copyObj.count)
})

</script>

10.nextTick(): 用于更新dom

<template>
  <div>
    <div id="nextTick"></div>
    <button @click="onChange">点击改变</button>
  </div>
</template>
<script setup>
import {nextTick} from "vue";


const onChange= ()=>{
  document.getElementById('nextTick').innerText = 'nextTick';
  nextTick(()=>{
    console.log('dom更新完毕')
  })
}


</script>

十四、vue应用实例

1.createApp()：创建一个 Vue 应用实例，用于初始化一个新的 Vue 应用。

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

2.createSSRApp()：创建一个用于服务端渲染 (SSR) 的 Vue 应用实例。
3.app.mount()：将 Vue 应用实例挂载到指定的 DOM 元素上，启动应用。

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

4.app.unmount()：卸载已经挂载的 Vue 应用实例，用于手动卸载应用。
5.app.component()：定义或注册全局组件。

import { createApp } from "vue";
import App from "./App.vue";
import Page from "@components/layout/Page.vue";

const app = createApp(App);

//注册全局组件
app.component('Page',Page);

app.mount("#app");

6.app.use(plugin,options)：安装 Vue.js 插件，options需要查看插件有哪些配置

import { createApp } from "vue";
import "./style.scss";
import App from "./App.vue";
import router from "@/router.js";
import pinia from "@store/pinia.js";
import lang from "@lang/lang.js";
import Page from "@components/layout/Page.vue";

const app = createApp(App);

app.use(router);
app.use(pinia);
app.use(lang);

//注册全局组件
app.component('Page',Page);

app.mount("#app");

7.app.directive()：注册全局自定义指令。
8.app.provide()：在应用的上下文中提供一个全局可访问的数据或方法。
9.app.runWithContext()：在指定上下文中运行一个函数。
10.app.mixin()：应用一个全局 mixin，不推荐。
11.app.version： Vue 的版本号。
12.app.config：全局配置对象，包含了一些全局配置选项。
13.app.config.errorHandler：全局错误处理函数，用于处理应用中的错误。
14.app.config.warnHandler：全局警告处理函数，用于处理应用中的警告。
15.app.config.performance：用于配置性能相关的选项。
16.app.config.compilerOptions：编译器选项，用于配置模板编译器的行为。
17.app.config.globalProperties：全局属性对象，用于添加全局属性或方法。
18.app.config.optionMergeStrategies：选项合并策略对象，用于自定义选项的合并行为。

十五、vue自定义插件

1.编写插件

import {createApp} from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use({
    install: (app, options) => {
        console.log(app, options)
    }
}, {
    test: '测试插件配置'
})

app.mount("#app");

2.插件中的 Provide / Inject

import {createApp} from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use({
    install: (app, options) => {
        app.provide('message', {text: '请求错误'})
    }
}, {
    test: '测试插件配置'
})

app.mount("#app");

3.插件使用场景

通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
通过 app.provide() 使一个资源可被注入进整个应用。
向 app.config.globalProperties 中添加一些全局实例属性或方法

局外人LZ

关注

21
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
一文带你看懂vue基础语法、生命周期、指令、监听器、依赖注入、插件

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的设计目标是通过简单、灵活的 API 提供高效的数据驱动视图层渲染。本文主要针对script setup讲解以下是 Vue.js 的一些特点和优势：1.简洁易用：Vue.js 的 API 简单易懂，容易上手，使开发者能够快速构建交互性强、动态的用户界面。
复制链接

扫一扫