前端学习之认识Vue3.0

最新推荐文章于 2023-10-07 17:31:02 发布

Rich$kr

最新推荐文章于 2023-10-07 17:31:02 发布

阅读量203

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/dream_as_horse/article/details/110942014

版权

Vue.js 3.0的区别

源码组织方式的变化
- 源码采用TypeScript重写
- 使用Monorepo管理项目结构
Composition API：解决Vue2.x开发大型项目时使用Options API遇到超大组件不好进行拆分和重写
性能提升：采用proxy重写了响应式代码，并对编译器做了优化重写了虚拟DOM，服务端渲染的性能也提升了2~3倍
- 响应式系统升级
  - 使用Proxy对象重写响应式系统
  - 可以监听动态新增的属性
  - 可以监听删除的属性
  - 可以监听数组的索引和length属性
- 编译优化
  - 标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
  - Fragments
  - 静态提升
  - Patch flag
  - 缓存事件处理函数
- 源码体积的优化
  - 移除了一些不常用的API（inline-template、filter等）
  - tree-shaking
vite：在开发模式下不需要打包就能直接运行
- 快速冷启动
- 按需编译
- 模块热更新

Composition API

APIs

createApp：创建一个Vue对象
setup：Composition API的入口，第一个参数props，第二个参数context
reactive：创建响应式的对象
toRefs：将响应式对象中的所有属性都转成响应式的
ref：把一个基本类型的数据转换为响应式的

<body>
  <div id="app">
    <button @click="increase">按钮</button>
    <span>{{ count }}</span>
  </div>
  <script type="module">
    import { createApp, ref } from './node_modules/vue/dist/vue.esm-browser.js'
    
    function useCount () {
      const count = ref(0)
      return {
        count,
        increase: () => {
          count.value++
        }
      }
    }

    createApp({
      setup () {
        return {
          ...useCount()
        }        
      }
    }).mount('#app')
  </script>
</body>

computed：监听变化

<body>
  <div id="app">
    <button @click="push">按钮</button>
    未完成：{{ activeCount }}
  </div>
  <script type="module">
    import { createApp, reactive, computed } from './node_modules/vue/dist/vue.esm-browser.js'
    const data = [
      { text: '看书', completed: false },
      { text: '敲代码', completed: false },
      { text: '约会', completed: true }
    ]

    createApp({
      setup() {
        const todos = reactive(data)

        const activeCount = computed(() => {
          return todos.filter(item => !item.completed).length
        })

        return {
          activeCount,
          push: () => {
            todos.push({
              text: '开会',
              completed: false
            })
          }
        }
      }
    }).mount('#app')
    
  </script>
</body>

watch：监听数据变化

<body>
  <div id="app">
    <p>
      请问一个 yes/no 的问题:
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>
  </div>

  <script type="module">
    // https://www.yesno.wtf/api
    import { createApp, ref, watch } from './node_modules/vue/dist/vue.esm-browser.js'

    createApp({
      setup () {
        const question = ref('')
        const answer = ref('')

        watch(question, async (newValue, oldValue) => {
          const response = await fetch('https://www.yesno.wtf/api')
          const data = await response.json()
          answer.value = data.answer
        })

        return {
          question,
          answer
        }
      }
    }).mount('#app')
  </script>
</body>

watchEffect：watch的简化版本，会返回一个取消监听的函数

生命周期钩子函数

composition API生命周期钩子函数

Rich$kr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之认识Vue3.0

Vue.js 3.0的区别源码组织方式的变化源码采用TypeScript重写使用Monorepo管理项目结构Composition API：解决Vue2.x开发大型项目时使用Options API遇到超大组件不好进行拆分和重写性能提升：采用proxy重写了响应式代码，并对编译器做了优化重写了虚拟DOM，服务端渲染的性能也提升了2~3倍响应式系统升级使用Proxy对象重写响应式系统可以监听动态新增的属性可以监听删除的属性可以监听数组的索引和length属性编译
复制链接

扫一扫