vue3.0

最新推荐文章于 2024-03-05 12:56:09 发布
最新推荐文章于 2024-03-05 12:56:09 发布
阅读量104 收藏 1
点赞数 1
文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Timesflies/article/details/119906913
版权

vue3.0入门

1.安装新版本vue

npm install -g @vue/cli

2.查看版本

vue --version

3.项目初始化

vue create cli3-test //vue create [项目名称]
main.js文件
import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')
router.js路由文件
// 可以根据路由模式的不同，后面俩可以只引用一个
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
 
// 构建我们的页面路由配置，可以看到，这里和原来的写法并无二致。
const routes = [
  {
    path: '/',
    component: Home
  }, {
    path: '/about',
    component: () => import('@/views/About.vue'),
  }
]
 
const router = createRouter({
  // 使用 hash 模式构建路由（ url中带 # 号的那种)
  history: createWebHashHistory(),
  // 使用 history 模式构建路由 （ url 中没有 # 号，但生产环境需要特殊配置）
  // history: createWebHistory(),
  routes
})
export default router
得益于 vue3.0 的特性，我们现在不比把组件内容全部包裹在某一个 div 下面了，一个 template 里面可以有多个根节点元素

App.vue

<template>
  <router-view />
</template>

About.vue

<template>
  这里是关于我们的页面
  <router-link to="/">点这里去首页</router-link>
</template>

在main.js挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
// 将创建的 App 搞个别名
const app = createApp(App)
 
// 使用路由配置
app.use(router)
 
// 挂载运行
app.mount('#app')

4.setup()函数

有两个参数：== props == 、== context ==
** 在 setup 函数中 return 出去的东西，可以在模板区域直接使用，也不必理会 this **

1）props

// MyBook.vue

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}
// WARNING
// 因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性

// 如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作：
// About.vue

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

2）context

// About.vue

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

// About.vue
// 不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

5.ref

// Home.vue
<template>
  <router-link to="/about">点这里去关于我们页面</router-link>
  <div class="home">
    这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
    <button @click="countAdd">{{btnText}}</button>
  </div>
</template>
 
<script>
// ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的值
import { ref } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个不需要改变的数据
    const btnText = '点击按钮'
    // 定义一个 count 的响应式数据，并赋值为 0
    const count = ref(0)
    // 定义一个函数，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 导出一些内容给上面的模板区域使用
    return {
      btnText,
      count,
      countAdd
    }
  }
}
</script>
<style lang="scss">
.home {
  line-height: 2;
  .red {
    color: red;
  }
}
</style>

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 的语法糖函数。

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x) // unwrapped 现在一定是数字类型
}

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef

isRef

检查值是否为一个 ref 对象。

customRef

<input v-model="text" />

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}

shallowRef

const foo = shallowRef({})
// 改变 ref 的值是响应式的
foo.value = {}
// 但是这个值不会被转换。
isReactive(foo.value) // false

triggerRef

const shallow = shallowRef({
  greet: 'Hello, world'
})

// 第一次运行时记录一次 "Hello, world"
watchEffect(() => {
  console.log(shallow.value.greet)
})

// 这不会触发副作用，因为 ref 是浅层的
shallow.value.greet = 'Hello, universe'

// 记录 "Hello, universe"
triggerRef(shallow)

6.reactive

reactive 和 ref 的区别就是，reactive 是处理对象或者数组的

<template>
  <router-link to="/">点这里去首页</router-link>
  <hr>
  <dl>
    <dt>{{state.name}}</dt>
    <dd>性别：{{state.sex}}</dd>
    <dd>地址：{{state.address}}</dd>
  </dl>
  <button @click="addressChange">更新地址</button>
</template>
<script>
// reactive 是 vue 3.0 的一个重大变化，其作用为创建响应式的对象或数组
import { reactive } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个 state 的响应式对象数据，并赋值
    const state = reactive({
      name: 'FungLeo',
      sex: 'boy',
      address: '上海'
    })
    console.log(state)
    // 定义一个函数，修改 state 的值。
    const addressChange = () => {
      state.address += '浦东'
    }
    // 导出一些内容给上面的模板区域使用
    return {
      state,
      addressChange
    }
  }
}
</script>

7.生命周期函数

2.03.0
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured
// 你需要使用到什么生命周期，就引出来什么生命周期
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  // setup 函数，就相当于 vue 2.0 中的 created
  setup () {
    const count = ref(0)
    // 其他的生命周期都写在这里
    onBeforeMount (() => {
      count.value++
      console.log('onBeforeMount', count.value)
    })
    onMounted (() => {
      count.value++
      console.log('onMounted', count.value)
    })
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
    onBeforeUpdate (() => {
      console.log('onBeforeUpdate', count.value)
    })
    onUpdated (() => {
      console.log('onUpdated', count.value)
    })
    onBeforeUnmount (() => {
      count.value++
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      count.value++
      console.log('onUnmounted', count.value)
    })
    // 定义一个函数，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    return {
      count,
      countAdd
    }
  }
}

8.Provide / Inject

只能在当前活动实例的 setup() 期间调用

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>
provide

provide 函数允许你通过两个参数定义 property：

  1. name ( 类型)
  2. value
<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>
Inject

inject 函数有两个参数：

  1. 要 inject 的 property 的 name
  2. 默认值 (可选)
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')

    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>
响应性
<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
}
</script>
<!-- 现在，如果这两个 property 中有任何更改，MyMarker 组件也将自动更新！-->

<!-- src/components/MyMap.vue -->
<!-- 提供 -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    const updateLocation = () => {
      location.value = 'South Pole'
    }

    provide('location', location)
    provide('geolocation', geolocation)
    provide('updateLocation', updateLocation)
  }
}
</script>

<!-- src/components/MyMarker.vue -->
<!-- 接收 -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    const updateUserLocation = inject('updateLocation')

    return {
      userLocation,
      userGeolocation,
      updateUserLocation
    }
  }
}
</script>
readonly

__ 如果要确保通过 provide 传递的数据不会被 inject 的组件更改，我们建议对提供者的 property 使用 readonly __

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, readonly, ref } from 'vue'
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    const updateLocation = () => {
      location.value = 'South Pole'
    }

    provide('location', readonly(location))
    provide('geolocation', readonly(geolocation))
    provide('updateLocation', updateLocation)
  }
}
</script>

9.计算属性

<template>
  <router-link to="/">点这里去首页</router-link>
  <hr>
  <div class="home">
    这里是一个计数器 >>> <span class="red">{{count}}</span> <br>
    右边的数字是上面的数字的十倍 >>> <span class="red">{{bigCount}}</span> <br>
    右边的数字是上面的数字的一百倍 >>> <span class="red">{{computeCount['100x']}}</span> <br>
    右边的数字是上面的数字的一千倍 >>> <span class="red">{{computeCount['1000x']}}</span> <br>
    <button @click="countAdd">点这个按钮上面的数字会变</button>
  </div>
</template>
 
<script>
// 需要使用计算属性，也需要从 vue 中导出引入
import { ref, computed } from 'vue'
// 导出依然是个对象，不过对象中只有一个 setup 函数
export default {
  setup () {
    // 定义一个 count 的响应式数据，并赋值为 0
    const count = ref(0)
    // 定义一个函数，修改 count 的值。
    const countAdd = () => {
      count.value++
    }
    // 计算属性，使用计算函数并命名，然后在 return 中导出即可
    const bigCount = computed(() => {
      return count.value * 10
    })
    // 计算多个属性，可以通过返回一个对象的方式来实现
    const computeCount = computed(() => {
      return {
        '100x': count.value * 100,
        '1000x': count.value * 1000,
      }
    })
    // 导出一些内容给上面的模板区域使用
    return {
      count,
      countAdd,
      bigCount,
      computeCount
    }
  }
}
</script>

10.watch

3 个参数：

  1. 一个想要侦听的响应式引用或 getter 函数
  2. 一个回调
  3. 可选的配置选项
import { ref, watch } from 'vue'

const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'

// 在我们组件中
setup (props) {
  // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  const { user } = toRefs(props)

  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }

  onMounted(getUserRepositories)

  // 在 user prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)

  return {
    repositories,
    getUserRepositories
  }
}

watch重点为了监听做事情. 看重的不是返回结果, 而是属性的变化.
computed重点为了得到一个属性值,看重的是它的返回结果.

Sunny ღ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API-Vue.js开发
05-27
vue3-bigData是一个可视化系统，基于vue3.0 和 echarts实现，使用vue的最新的技术栈，包括各种可视化图表。 vue3-bigData 探索本项目的文档 » 在线预览 · 提出Bug · 提出新特性 简介 vue3-bigData是一个...
vue3.0pdf在线预览
02-25
vue3.0pdf在线预览
Vue3中shallowReactive 与 shallowRef 的用法
李公子的博客
08-21 2万+
shallowReactive 与 shallowRef shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
深入了解 shallowRef 和 shallowReactive
qq_53114797的博客
06-30 4024
通过使用shallowRef和，我们可以更加灵活地处理响应式数据。它们能够提高性能，并且在某些场景下帮助我们避免不必要的响应式更新。当我们明确知道某个值或对象的内部属性不需要进行深层次的响应式处理时，就可以选择使用shallowRef或来优化我们的代码。在实际开发中，请根据具体需求和情况谨慎选择是否使用shallowRef和，并合理利用它们提供的优势。
【Vue3】Ref 和 ShallowRef 的区别
m0_71975585的博客
03-05 850
Ref 是 Vue 3 中的一个新的基本响应式数据类型，它允许我们包装任意的 JavaScript 值，并且在数据变化时发出通知。Ref 提供了一个 .value 属性来访问其内部的值，同时还提供了一些额外的 API 来处理数据。Ref 可以被用于跟踪单个值的变化，并在需要时自动触发重新渲染。ShallowRef 与 Ref 类似，它也是用来包装值并监听变化的。但是，与 Ref 不同的是，ShallowRef 会对其包装的值进行浅层的响应式转换。
ref与shallowRef区别
LiuMH2011的专栏
03-24 6302
vue3组合式API-ref与shallowRef区别
vue3之shallowRef
m0_57996540的博客
11-04 1496
vue3之shallowRef
使用 shallowRef() 来绕开深度响应
文摘资讯
01-01 909
Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常这只有在处理超大型数组或层级很深的对象时，例如一次渲染需要访问 100,000+ 个属性时，才会变得比较明显。因此，它只会影响少数特定的场景。Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 sha...
vue3.0-admin:vue3.0 +打字稿+ element-ui +后台系统
03-11
vue3-管理员 简介 vue3-admin是一个后台管理系统的前端页面展示，是由vue-...cd vue3.0-admin # 安装依赖 npm install # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm ins
vue3.0版本下载
10-30
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另...
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 正式发布了，喜大普奔:beaming_face_with_smiling_eyes:。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。 Vue 3.0 中尤大使用的...
Vue3:响应式进阶（shallowRef、triggerRef、customRef、shallowReactive、shallowReadonly、toRaw）
weixin_62364503的博客
09-22 1588
Vue3:响应式 API：进阶
【vue3】shallowReactive与shallowRef；readonly与shallowReadonly；toRaw与markRaw
花椒和蕊的博客
10-02 825
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly；toRaw与markRaw详解
【Vue3 知识第六讲】ref、 shallowRef、unref、isRef 等系列知识应用
前端知识分享喵
09-04 1900
ref、 shallowRef、unref、isRef 等系列知识应用
Vue3实用但冷门的API
weixin_56095898的博客
11-22 187
今天给大家分享几个很少人用，但是又非常有用的 Vue3 的 API，废话不多说，我们开始！
Vue响应式进阶
前端界的小学生
05-09 900
和shallowRef()方法作用一样，shallowReactive()也是监听第一层数据，不一样的是数据是reactive数据，不是ref数据。track和trigger两个函数的作用就是将数据变成响应式，触发其他的方法，比如只有触发了track和trigger两个函数组件才会重新渲染，页面数据才会变。shallowRef()和triggerRef()是一对死对头，前者是深层数据改变的时候不让重新渲染组件，后者则是深层数据改变的时候偏偏就要重新渲染组件。可以返回由 reactive()
shallowRef和shallowReactive的使用?
jia嘉ioo的博客
05-19 504
vue3中的shallowref和shalowreactive
Vue3中使用component :is 加载组件
热门推荐
m0_51431448的博客
02-11 3万+
1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串 <template> <Child1 /> <Child2 /> <component :is="currentComp"></component> <el-button @click="compChange">切换组件</el-button> </template> <script> import
vue3.0 markdown
最新发布
04-17
Vue 3.0是一种流行的JavaScript框架Vue.js的最新版本。它带来了一些重要的改进和新功能，使得开发者能够更高效地构建现代化的Web应用程序。 以下是Vue 3.0的一些主要特点和改进： 1. 更好的性能：Vue 3.0通过使用Proxy代理对象和优化的响应式系统，提供了更好的性能。它能够更准确地追踪数据变化，并在需要时进行更新，从而减少了不必要的重新渲染。 2. Composition API：Vue 3.0引入了Composition API，这是一种新的API风格，使得组件逻辑更加可组合和可重用。它允许开发者根据功能而不是组件层次结构来组织代码，提供了更灵活和直观的开发体验。 3. 更好的TypeScript支持：Vue 3.0对TypeScript的支持得到了改进，提供了更好的类型推断和类型检查。这使得开发者能够在开发过程中更早地捕获错误，并提供更好的代码补全和文档。 4. 更小的包体积：Vue 3.0通过使用Tree-shaking技术和优化的编译器，减少了包的体积。这意味着应用程序加载更快，并且用户可以更快地与应用程序进行交互。 5. 更好的逻辑复用：Vue 3.0通过提供更多的逻辑复用选项，如自定义渲染器和渲染函数，使得开发者能够更灵活地控制组件的渲染过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值