vue3学习手册

最新推荐文章于 2024-05-09 08:05:20 发布
最新推荐文章于 2024-05-09 08:05:20 发布
阅读量1.4k 收藏 6
点赞数
分类专栏： 前端 文章标签： 学习 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46188681/article/details/130815972
版权

vue3

1.认识vue3

1.1了解相关信息

  • Vue.js 3.0 “One Piece” 正式版在今年9月份发布
  • 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
  • Vue3支持vue2的大多数特性
  • 更好的支持Typescript

1.2 性能提升:

  • 打包大小减少41%
  • 初次渲染快55%, 更新渲染快133%
  • 内存减少54%
  • 使用Proxy代替defineProperty实现数据响应式
  • 重写虚拟DOM的实现和Tree-Shaking

1.3 新增特性

  • Composition (组合) API
  • setup
    • ref 和 reactive
    • computed 和 watch
    • 新的生命周期函数
    • provide与inject
    • …
  • 新组件
    • Fragment - 文档碎片
    • Teleport - 瞬移组件的位置
    • Suspense - 异步加载组件的loading界面
  • 其它API更新
    • 全局API的修改
    • 将原来的全局API转移到应用对象
    • 模板语法变化

1.4 使用 vue-cli 创建vue项目

文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project

接下来的步骤:

Please pick a preset - 选择 Manually select features
Check the features needed for your project - 选择上 TypeScript ，特别注意点空格是选择，点回车是下一步
Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
Use class-style component syntax - 直接回车
Use Babel alongside TypeScript - 直接回车
Pick a linter / formatter config - 直接回车
Use history mode for router? - 直接回车
Pick a linter / formatter config - 直接回车
Pick additional lint features - 直接回车
Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
Save this as a preset for future projects? - 直接回车

1.5 使用 vite 创建

  • 文档: https://v3.cn.vuejs.org/guide/installation.html
  • vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
  • 它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。
    • 快速的冷启动，不需要等待打包操作；
    • 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
    • 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

2.全局api

2.1 createApp()

创建一个应用实例。

创建一个应用实例。

  • 类型

    function createApp(rootComponent: Component, rootProps?: object): App

  • 详细信息

    第一个参数是根组件。第二个参数可选，它是要传递给根组件的 props。

  • 示例

    可以直接内联根组件：

    import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

2.2 app.mount()

将应用实例挂载在一个容器元素中。

  • 类型

    interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

  • 详细信息

    参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。

    如果该组件有模板或定义了渲染函数，它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下，容器元素的 innerHTML 将被用作模板。

    在 SSR 激活模式下，它将激活容器内现有的 DOM 节点。如果出现了激活不匹配，那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果。

    对于每个应用实例， mount() 仅能调用一次。

  • 示例

    import { createApp } from 'vue'
const app = createApp(/* ... */)

app.mount('#app')

    也可以挂载到一个实际的 DOM 元素。

    app.mount(document.body.firstChild)

2.3 app.unmount()

卸载一个已挂载的应用实例。卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子。

  • 类型

    interface App {
  unmount(): void
}

2.4 app.provide()

提供一个值，可以在应用中的所有后代组件中注入使用。

  • 类型

    interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

  • 详细信息

    第一个参数应当是注入的 key，第二个参数则是提供的值。返回应用实例本身。

  • 示例

    import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'hello')

    在应用的某个组件中：

    export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'hello'
  }
}

2.5 app.component()

如果同时传递一个组件名字符串及其定义，则注册一个全局组件；如果只传递一个名字，则会返回用该名字注册组件（如果存在的话）。

  • 类型

    interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

  • 示例

    import { createApp } from 'vue'

const app = createApp({})

// 注册一个选项对象
app.component('my-component', {
  /* ... */
})

// 得到一个已注册的组件
const MyComponent = app.component('my-component')

    可以在别的模板中直接使用注册到全局的组件

2.6 app.use()

安装一个插件。

  • 类型

    interface App {
  use(plugin: Plugin, ...options: any[]): this
}

  • 详细信息

    第一个参数应是插件本身，可选的第二个参数是要传递给插件的选项。

    插件可以是一个带 install() 方法的对象，亦或直接是一个将被用作 install() 方法的函数。插件选项 (app.use() 的第二个参数) 将会传递给插件的 install() 方法。

    若 app.use() 对同一个插件多次调用，该插件只会被安装一次。

  • 示例

    import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({
  /* ... */
})

app.use(MyPlugin)

2.7 app.version

提供当前应用所使用的 Vue 版本号。这在插件中很有用，因为可能需要根据不同的 Vue 版本执行不同的逻辑。

  • 类型

    interface App {
  version: string
}

  • 示例

    在一个插件中对版本作判断：

    import { version } from 'vue'

console.log(version)

2.8 app.config

每个应用实例都会暴露一个 config 对象，其中包含了对这个应用的配置设定。你可以在挂载应用前更改这些属性 (下面列举了每个属性的对应文档)。

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

2.9 app.config.errorHandler

用于为应用内抛出的未捕获错误指定一个全局处理函数。

  • 类型

    interface AppConfig {
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` 是一个 Vue 特定的错误信息
    // 例如：错误是在哪个生命周期的钩子上抛出的
    info: string
  ) => void
}

  • 详细信息

    错误处理器接收三个参数：错误对象、触发该错误的组件实例和一个指出错误来源类型信息的字符串。

    它可以从下面这些来源中捕获错误：

    • 组件渲染器
    • 事件处理器
    • 生命周期钩子
    • setup() 函数
    • 侦听器
    • 自定义指令钩子
    • 过渡 (Transition) 钩子

  • 示例

    app.config.errorHandler = (err, instance, info) => {
  // 处理错误，例如：报告给一个服务
}

3.0 app.config.warnHandler

用于为 Vue 的运行时警告指定一个自定义处理函数。

  • 类型

    interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

  • 详细信息

    警告处理器将接受警告信息作为其第一个参数，来源组件实例为第二个参数，以及组件追踪字符串作为第三个参数。

    这可以用户过滤筛选特定的警告信息，降低控制台输出的冗余。所有的 Vue 警告都需要在开发阶段得到解决，因此仅建议在调试期间选取部分特定警告，并且应该在调试完成之后立刻移除。

3.setup()

3.1 setup

  • 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
  • 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>名字{{ age }}</h1>
    <h1>年龄{{ name }}</h1>
    <button @click="showMessage">showMessage</button>
    <MessageComponent></MessageComponent>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    let  name = 'admin';
    let age = 20;
    let  showMessage = ()=>{
      alert(`我是${name},今年${age}岁了`)
    }
    return {name,age,showMessage};
  }
}
</script>

<style scoped>

</style>
  • 可以返回一个渲染函数，渲染函数渲染的结果会覆盖掉组件中原有的元素【不常用】
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>名字{{ age }}</h1>
    <h1>年龄{{ name }}</h1>
    <button @click="showMessage">showMessage</button>
    <MessageComponent></MessageComponent>
  </div>
</template>

<script>
  import {h} from 'vue'

  export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    return ()=> h('h1','helloWorld')
  }
}
</script>

<style scoped>

</style>

3.2 ref

  • 作用: 定义一个数据的响应式
  • 语法: const xxx = ref(initValue):
    • 创建一个包含响应式数据的引用(reference)对象
    • js中操作数据: xxx.value
    • 模板中操作数据: 不需要.value
  • 一般用来定义一个基本类型的响应式数据
<template>
  <div class="hello">
    <h1>父组件:{{ msg }}</h1>
    <h1>名字:{{ age }}</h1>
    <h1>年龄:{{ name }}</h1>
    <div>行业：{{job.type}}  薪资：{{job.salary}}K</div>
    <button @click="updateData">updateData</button>
    <MessageComponent></MessageComponent>
  </div>
</template>

<script>
import  {ref} from 'vue'
  export default {
  name: 'HelloWorld',
    props: {
      msg: String
    },
  setup(props){
    let  name = ref('admin');
    let age = ref( 20);
    let job = ref({type:'java,',salary:10});
    let  updateData = ()=>{
      name.value = 'root';
      age.value = 25;
       job.value.salary =  ++job.value.salary;

    }
    let  {msg} = props;
    console.log()
    return {name,age,msg,job,updateData};
  }
}
</script>

<style scoped>

</style>

3.3 访问 Props

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，并且会在传入新的 props 时同步更新。

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

请注意如果你解构了 props 对象，解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。

3.4 Setup 上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}

该上下文对象是非响应式的，可以安全地解构：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

3.5 暴露公共属性

expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容：
export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}

3.6 reactive 引用类型数据响应式

  • 作用: 定义多个数据的响应式
  • const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
  • 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的
<template>
  <div class="hello">
    <h1>父组件:{{ msg }}</h1>
    <div>行业：{{job.type}}  薪资：{{job.salary}}K</div>
    <button @click="updateData">updateData</button>
    <MessageComponent></MessageComponent>
  </div>
</template>

<script>
import  {ref,reactive} from 'vue'
  export default {
  name: 'HelloWorld',
    props: {
      msg: String
    },
  setup(props){

    let job = reactive({type:'java,',salary:10});
    let  updateData = ()=>{
      console.log(job)

      job.salary =  ++job.salary;


    }
    let  {msg} = props;
    return {msg,job,updateData};
  }
}
</script>

<style scoped>

</style>

3.7 vue2的响应式

  • 核心:
    • 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
    • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
  • 问题
    • 对象直接新添加的属性或删除已有属性, 界面不会自动更新
    • 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

3.8 Vue3的响应式

  • 核心:
    • 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…
    • 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作
    • 文档:
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
      • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

3.9 setup细节

  • setup执行的时机
    • 在beforeCreate之前执行(一次), 此时组件对象还没有创建
    • this是undefined, 不能通过this来访问data/computed/methods / props
    • 其实所有的composition API相关回调函数中也都不可以
  • setup的返回值
    • 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
    • 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
    • 返回对象中的方法会与methods中的方法合并成功组件对象的方法
    • 如果有重名, setup优先
    • 注意:
    • 一般不要混合使用: methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods
    • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
  • setup的参数
    • setup(props, context) / setup(props, {attrs, slots, emit})
    • props: 包含props配置声明且传入了的所有属性的对象
    • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
    • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
    • emit: 用来分发自定义事件的函数, 相当于 this.$emit

3.10 reactive与ref-细节

  • 是Vue3的 composition API中2个最重要的响应式API
  • ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式)
  • 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象
  • ref内部: 通过给value属性添加getter/setter来实现对数据的劫持
  • reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据
  • ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)

3.11 readonly()

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

  • 类型

    function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>>

  • 详细信息

    只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

4.计算属性与监视

4.1计算属性

  • computed函数:
    • 与computed配置功能一致
    • 只有getter
    • 有getter和setter
  • watch函数
    • 与watch配置功能一致
    • 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
    • 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
    • 通过配置deep为true, 来指定深度监视
  • watchEffect函数
    • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
    • 默认初始时就会执行第一次, 从而可以收集需要监视的数据
    • 监视数据发生变化时回调
<template>
  <h2>App</h2>
  性: <input v-model="user.firstName"/><br>
  名: <input v-model="user.lastName"/><br>
  只有getter的计算属性: <input v-model="fullName1"/><br>
  有getter与setter的计算属性: <input v-model="fullName2"><br>
</template>

<script lang="js">
  /*
  计算属性与监视
  1. computed函数:
    与computed配置功能一致
    只有getter
    有getter和setter
  2. watch函数
    与watch配置功能一致
    监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
    默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
    通过配置deep为true, 来指定深度监视
  3. watchEffect函数
    不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
    默认初始时就会执行第一次, 从而可以收集需要监视的数据
    监视数据发生变化时回调
  */

  import {
    reactive,
    computed,
  } from 'vue'

  export default {

    setup () {
      const user = reactive({
        firstName: 'admin',
        lastName: 'root'
      })

      // 只有getter的计算属性
      const fullName1 = computed(() => {
        return user.firstName + '-' + user.lastName
      })

      // 有getter与setter的计算属性
      const fullName2 = computed({
        get () {
          return user.firstName + '-' + user.lastName
        },

        set (value) {
          const names = value.split('-')
          user.firstName = names[0]
          user.lastName = names[1]
        }
      })

      return {
        user,
        fullName1,
        fullName2
      }
    }
  }
</script>

4.2监视

vue2写法：

<template>
    <h2>当前sum：{{sum}}</h2>
    <button @click="sum++">按钮</button>
</template>

<script lang="js">
    /*
    计算属性与监视
    1. computed函数:
      与computed配置功能一致
      只有getter
      有getter和setter
    2. watch函数
      与watch配置功能一致
      监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
      默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
      通过配置deep为true, 来指定深度监视
    3. watchEffect函数
      不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
      默认初始时就会执行第一次, 从而可以收集需要监视的数据
      监视数据发生变化时回调
    */

    import {
        reactive,
        computed,
        watch,
        ref
    } from 'vue'

    export default {
        name: "HelloWorld",
        // vue2写法
        watch: {
            // 简单版本
            sum(newValue, oldValue) {
                console.log('handler-sum', {newValue, oldValue})
            }

            /* // 复杂版本形式 具有配置化
                        sum: {
                            // 采用一开始就监视
                            immediate: true,
                            // 开启深度监视
                            deep: true,
                            handler(newValue, oldValue) {
                                console.log('handler-sum', {newValue, oldValue})
                            }
            }*/
        },
        setup() {
            let sum = ref(0)

            return {
                sum,
            }
        }
    }
</script>

vue3写法：

监视 ref 数据

<template>
    <h2>当前sum：{{sum}}</h2>
    <button @click="sum++">按钮</button>
</template>

<script lang="js">
    /*
    计算属性与监视
    1. computed函数:
      与computed配置功能一致
      只有getter
      有getter和setter
    2. watch函数
      与watch配置功能一致
      监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
      默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
      通过配置deep为true, 来指定深度监视
    3. watchEffect函数
      不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
      默认初始时就会执行第一次, 从而可以收集需要监视的数据
      监视数据发生变化时回调
    */

    import {
        reactive,
        computed,
        watch,
        ref
    } from 'vue'

    export default {
        name: "HelloWorld",
        setup() {
            let sum = ref(0);
            let msg = ref("hello");

            // 监视:ref所有定义的一个响应式数据
            // watch(sum,(newValue,oldValue)=>{
            //     console.log("watch:",{newValue,oldValue})
            // })

            // 监视:ref所有定义的多个响应式数据
            // 如果监视的普通数据类型不需要.vlaue【ref】，如果监听的是对象类型需要.value【reactive】
            watch([sum,msg],(newValue,oldValue)=>{
                console.log("watch:[sum,msg]",{newValue:newValue.toString(),oldValue:oldValue.toString()})
                // 配置一开始就监视和深度监视
            },{immediate:true,deep:true})
            return {
                sum,
                msg
            }
        }
    }
</script>

监视 reactive 数据

<template>
    <h2>当前sum：{{person}}</h2>
    <button @click="person.name = (Date.now())">修改姓名</button>
    <button @click="person.age = (Date.now())">修改年龄</button>
    <button @click="person.job.salary++">修改薪资</button>
</template>

<script lang="js">
    /*
    计算属性与监视
    1. computed函数:
      与computed配置功能一致
      只有getter
      有getter和setter
    2. watch函数
      与watch配置功能一致
      监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
      默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
      通过配置deep为true, 来指定深度监视
    3. watchEffect函数
      不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
      默认初始时就会执行第一次, 从而可以收集需要监视的数据
      监视数据发生变化时回调
    */

    import {
        reactive,
        computed,
        watch,
        ref
    } from 'vue'

    export default {
        name: "HelloWorld",
        setup() {
            let person = reactive({name:'admin',age:20,job:{type:'java',salary:15000}});
            // 监视:watch reactive响应式数据
            // 1.无法正确获取oldValue
            // 2.强制开启了深度监视
            // watch(person,(newValue,oldValue)=>{
            //     console.log("watch:[person]",{newValue:newValue,oldValue:oldValue})
            //     // 配置一开始就监视和深度监视
            // },{immediate:true,deep:true})
            // return {
            //     person
            // }

            // 监视:watch reactive响应式数据的某个数据
            // 1.oldValue和new能正确获取到
            // watch(()=>person.age,(newValue,oldValue)=>{
            //     console.log("watch:[age]",{newValue:newValue,oldValue:oldValue})
            //     // 配置一开始就监视和深度监视
            // },{immediate:true,deep:true})
            // return {
            //     person
            // }

            // 监视:watch reactive响应式数据的某些数据
            // watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
            //     console.log("watch:[age,name]",{newValue:newValue,oldValue:oldValue})
            //     // 配置一开始就监视和深度监视
            // },{immediate:true,deep:true})
            // return {
            //     person
            // }

            // 监视:watch reactive响应式数据的深度监视
            // 定义的deep有效
            // 无法正确获取oldValue
            watch([()=>person.job],(newValue,oldValue)=>{
                console.log("watch:[job]",JSON.stringify({newValue:newValue,oldValue:oldValue}))
                // 配置一开始就监视和深度监视
            },{immediate:true,deep:true})
            return {
                person
            }
        }
    }
</script>

4.3 watchEffect函数

  • 不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
  • 默认初始时就会执行第一次, 从而可以收集需要监视的数据
  • 监视数据发生变化时回调
<template>
    <h2>当前sum：{{person}}</h2>
    <button @click="person.name = (Date.now())">修改姓名</button>
    <button @click="person.age = (Date.now())">修改年龄</button>
    <button @click="person.job.salary++">修改薪资</button>
</template>

<script lang="js">
    /*
    计算属性与监视
    1. computed函数:
      与computed配置功能一致
      只有getter
      有getter和setter
    2. watch函数
      与watch配置功能一致
      监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
      默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
      通过配置deep为true, 来指定深度监视
    3. watchEffect函数
      不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
      默认初始时就会执行第一次, 从而可以收集需要监视的数据
      监视数据发生变化时回调
    */

    import {
        reactive,
        computed,
        watchEffect,
        ref
    } from 'vue'

    export default {
        name: "HelloWorld",
        setup() {
            let person = reactive({name:'admin',age:20,job:{type:'java',salary:15000}});
            // 一开始的时候会被执行一次 然后里面监听的变量值改变的时候，该函数还会被再次执行
            // 跟react的useEffect相似
            watchEffect(()=>{
                const name = person.name;
                console.log("watchEffect回调执行");
            })
            return {
                person
            }
        }
    }
</script>

5.vue3生命周期

与 2.x 版本生命周期相对应的组合式 API

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

  • onRenderTracked
  • onRenderTriggered

MainApp.vue

<template>
    <h2>ChildComponent</h2>
    <button @click="isShow=!isShow">切换</button>
    <hr>
    <Message v-if="isShow"/>
</template>

<script >
    import Message from './ChildComponent'
    export default {

        data () {
            return {
                isShow: true
            }
        },

        components: {
            Message
        }
    }
</script>

ChildComponent.vue

<template>
 <div class="about">
  <h2>msg: {{msg}}</h2>
  <hr>
  <button @click="update">更新</button>
 </div>
</template>

<script >
 import {
  ref,
  onMounted,
  onUpdated,
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount
 } from "vue"

 export default {
  beforeCreate () {
   console.log('beforeCreate()')
  },

  created () {
   console.log('created')
  },

  beforeMount () {
   console.log('beforeMount')
  },

  mounted () {
   console.log('mounted')
  },

  beforeUpdate () {
   console.log('beforeUpdate')
  },

  updated () {
   console.log('updated')
  },

  beforeUnmount () {
   console.log('beforeUnmount')
  },

  unmounted () {
   console.log('unmounted')
  },


  setup() {

   const msg = ref('abc')

   const update = () => {
    msg.value += '--'
   }

   onBeforeMount(() => {
    console.log('--onBeforeMount')
   })

   onMounted(() => {
    console.log('--onMounted')
   })

   onBeforeUpdate(() => {
    console.log('--onBeforeUpdate')
   })

   onUpdated(() => {
    console.log('--onUpdated')
   })

   onBeforeUnmount(() => {
    console.log('--onBeforeUnmount')
   })

   onUnmounted(() => {
    console.log('--onUnmounted')
   })

   return {
    msg,
    update
   }
  }
 }
</script>

配置项生命周期钩子函数和组合式api生命钩子函数，尽量不要重复使用，组合式api生命钩子函数会优先于配置项生命周期钩子函数

6.新组件

6.1 Fragment(片断)

  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用

6.2 Teleport(瞬移)

  • Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示

ModalButton.vue

<template>
  <button @click="modalOpen = true">
      Open full screen modal! (With teleport!)
  </button>

  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        I'm a teleported modal! 
        (My parent is "body")
        <button @click="modalOpen = false">
          Close
        </button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'modal-button',
  setup () {
    const modalOpen = ref(false)
    return {
      modalOpen
    }
  }
}
</script>


<style>
.modal {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 300px;
  height: 300px;
  padding: 5px;
}
</style>

App.vue

<template>
  <h2>App</h2>
  <modal-button></modal-button>
</template>

<script lang="ts">
import ModalButton from './ModalButton.vue'

export default {
  setup() {
    return {
    }
  },

  components: {
    ModalButton
  }
}
</script>

6.3 Suspense(不确定的)

  • 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

  • App.vue

<template>
  <Suspense>
    <template v-slot:default>
      <AsyncComp/>
      <!-- <AsyncAddress/> -->
    </template>

    <template v-slot:fallback>
      <h1>LOADING...</h1>
    </template>
  </Suspense>
</template>

<script lang="ts">
/* 
异步组件 + Suspense组件
*/
// import AsyncComp from './AsyncComp.vue'
import AsyncAddress from './AsyncAddress.vue'
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
export default {
  setup() {
    return {
     
    }
  },

  components: {
    AsyncComp,
    AsyncAddress
  }
}
</script>
  • AsyncComp.vue
<template>
  <h2>AsyncComp22</h2>
  <p>{{msg}}</p>
</template>

<script lang="ts">

export default {
  name: 'AsyncComp',
  setup () {
    // return new Promise((resolve, reject) => {
    //   setTimeout(() => {
    //     resolve({
    //       msg: 'abc'
    //     })
    //   }, 2000)
    // })
    return {
      msg: 'abc'
    }
  }
}
</script>
  • AsyncAddress.vue
<template>
<h2>{{data}}</h2>
</template>

<script lang="ts">
import axios from 'axios'
export default {
  async setup() {
    const result = await axios.get('/data/address.json')
    return {
      data: result.data
    }
  }
}
</script>

6.4 Transition

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 <component> 切换的动态组件

以下是最基本用法的示例：

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

6.5 KeepAlive

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

在组件基础章节中，我们已经介绍了通过特殊的 <component> 元素来实现动态组件的用法：

<component :is="activeComponent" />

默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态 —— 当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。

6.5.1 最大缓存实例数

我们可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

6.5.2 包含/排除

<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

6.5.3 缓存实例的生命周期

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

一个持续存在的组件可以通过 activated 和 deactivated 选项来注册相应的两个状态的生命周期钩子：

export default {
  activated() {
    // 在首次挂载、
    // 以及每次从缓存中被重新插入的时候调用
  },
  deactivated() {
    // 在从 DOM 上移除、进入缓存
    // 以及组件卸载时调用
  }
}

请注意：

  • activated 在组件挂载时也会调用，并且 deactivated 在组件卸载时也会调用。
  • 这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。
野生java研究僧
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+element-plus 识别表单身份证获取到年龄、出生日期、性别
weixin_50041614的博客
08-16 1594
vue3+element-plus 识别表单身份证获取到年龄、出生日期、性别
vue3-examples:vue3的例子
05-06
Vue3.0 学习相关 :hourglass_done: 最近更新时间：:keycap_2: :keycap_0: :keycap_2: :keycap_1: / :keycap_0: :keycap_2: / :keycap_2: :keycap_0: :hourglass_not_done: :eyes: 本人会在仓库内更新一些 Vue3.0 ...
VUE3+TS+VITE 项目报错 “类型“ComponentInternalInstance | null”上不存在属性“proxy”
iuvc的博客
07-07 4509
vue3 + ts + vite报错：`“类型“ComponentInternalInstance | null”上不存在属性“proxy”` 和 类型“ComponentPublicInstance”上不存在属性“$http”
【Vue+TS】添加全局自定义属性后，在组件中通过this调用时找不到类型
莫诺库诺的博客
04-21 879
然后在main.js里进行注册如果你用的是组合式api，那么直接导入即可；这时需要用到Vue的来为Vue实例加上我们自定义的类型提示。
2024年最全Vue3中常用的一些方法使用手册_vue3中 mounted替代，怒斩获了30家互联网公司offer
2401_84617681的博客
05-07 430
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分。// 监听路由变化，必须加上immediate这个。//先定义父组件的回调方法。//value为参数。
焕然一新的 Vue 3 中文文档来了，附送50张学习思维图
weixin_57992300的博客
04-02 835
1.1简介.png4.2自定义指令.png四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
vue3之readonly
06-06 525
被readonly包裹的数据是不可以被修改的。
全网最全的vue3入门教程『图文并茂』
linwu的博客
08-05 5572
Vue 3 是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。你可以创建自定义的hooks来复用代码。一个自定义hook就是一个函数，它可以使用其他的响应式数据和组合式API。import {setup() {你可以使用customRef函数来创建一个自定义的响应式引用。这允许你控制和观察当引用的值发生变化时的行为。
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 7647
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue学习手册
02-26
前端超热门的框架Vue，学习笔记，具体内容来自Vue官方文档
Vue.js 2.0 参考手册
12-29
Vue.js 2.0 参考手册是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本...
vue2.0离线手册
12-24
vue2.0离线手册
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly…Vetur（2339）
11-19
问题描述：
Vue3-Admin-Plus:Vue3管理模板
04-01
Vue3 Admin Plus简介是一个后台前端...文件对象列表使用手册：对象表单使用手册： 开发# 克隆项目git clone https://github.com/JaxsonWang/Vue3-Admin-Plus.git# 进入项目目录cd Vue3-Admin-Plus# 安装依赖npm inst
Vue学习笔记（PDF、HTML版本）.zip
04-30
Vue4入门学习文档手册，包含vue.js的入门基本使用，包含vue-cli 4.0入门使用，包含axios网络请求和跨域配置。快速入门、快速入门、快速入门使用！大神请绕过
Web前端最新焕然一新的 Vue 3 中文文档来了，附送50张学习思维图，太香了
最新发布
2401_84123265的博客
05-09 561
4.2自定义指令.png本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】9.5渲染函数 & JSX.png附件==已将上述思维导图原图及原xmind文档上传到github，如有需要可自行下载：传送门[7]
Vue3中如何使用ref获取元素节点全面解析
zyf13671493506的博客
09-28 5315
vue3 ref获取dom的使用
类型“ComponentInternalInstance”上不存在属性“ctx”。
qq_43654065的博客
04-06 7582
问题： vue3中要使用$el获取元素，但是一直报错 原因：ts类型检测报错 解决： const { ctx } = getCurrentInstance() as any;
前端笔试 的点点滴滴
weixin_45391167的博客
10-10 182
css的重绘与回流 1：重绘：当节点需要更改外观而不会影响布局。 2：回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。 3：常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。 4：减少重绘和回流的办法。 5：使用css3新增属性：translate替代top等方向值。 6：避免频繁使用style，而是采用class。 箭头函数和普通函数的区别是什么？ 1：普通函数this： 2：this总是代表它的直接调
vue3手册 pdf下载
08-20
您好！很高兴回答您的问题。 要下载 Vue3 手册的 PDF 版本，您可以按照以下步骤进行操作： 1. 打开您的浏览器，连接到 Vue.js 官方网站。 2. 在页面上方的导航栏中，选择 "Docs"（文档）选项。 3. 在文档页面上，您可以看到各个版本的 Vue.js 文档。请找到 Vue3 的文档版本。 4. 在 Vue3 文档页面上，向下滚动，直到找到 "PDF" 的选项。 5. 点击 "PDF" 选项，它将带您转到一个新页面，显示生成的 PDF 下载链接。 6. 点击下载链接，浏览器将开始下载 Vue3 手册的 PDF 版本。 请注意，手册的下载过程可能因您所使用的浏览器而略有不同。您还可以使用搜索引擎来搜索 "Vue3 手册 PDF 下载"，并从结果中找到其他可靠的下载来源。 希望以上信息能够帮助到您，祝您学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值