其他分享
首页 > 其他分享> > 初识vue3.0

初识vue3.0

作者：互联网

vue3.0

packages 结构

packages
│   compiler-core  ------ 与平台无关的编译器
│   compiler-dom   ------ 浏览器平台下的编译器
│   compiler-sfc   ------ 单文件组件的编译器  依赖于 core dom
|   compiler-ssr   ------ 服务端渲染的编译器  依赖于 dom
|   reactivity     ------ 响应式系统可以单独使用
|   runtime-core   ------ 和平台无关的运行时
|   runtime-dom    ------ 浏览器的运行时 处理原生dom的api事件等
|   runtime-test   ------ 专门为测试编写的轻量级的运行时 渲染出来的dom数是js对象 可以运行在所有的js环						  境里 用来测试渲染是否正确  
|   server-renderer ----- 服务端渲染
|   shared         ------ vue内部使用的公共的api
|	size-check     ------ 私有的包不会发布npm 检查包的大小
|   template-explorer --- 浏览器运行的实时编译组件 输出render函数
|   vue            ------ 构建完整版的vue 依赖于 compiler rentime
global.d.ts

不同构建版本

不再构建 umd 模块的方式 因为umd代码冗余

在packags/vue/dist 文件夹中存放了vue3的所有构建版本

cjs

commonjs 方式 完整版的vue

global

都可以在浏览器中通过script直接引入使用 引入之后会创建一个全局的vue对象

browser

都包含esm，浏览器原生模块化方式 script type="module" 方式引入

bundler

没有打包所有代码 配合打包工具使用 esm 方式

Composition API 设计动机

Options API

composition API

Options API 和 composition API 对比

optionsApi vs compoition api

相比 options api ， composition api 把功能整合到一个函数 只需要在 setup 时直接获取 只需要关注功能函数

img

同一色块代表同一功能

vue3 性能提升

响应式系统升级

编译优化

源码体积优化

Vtie（法语 快的意思）

ES Module

vite vs Vue-Cl

vite创建项目

vite 拦截.vue 的请求 转换为js文件 把响应头改为 Content-Type: application/javascript; charset=UTF-8

composition api

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

   import { createApp } from 'vue'
   const app = createApp({
    setup () {
    	return {
    		....
    	}
    }
   	.....
   })

   import { createApp, reactive } from 'vue'
   const app = createApp({
    setup () {
    	return {
    		....
    	}
    }
   })

生命周期钩子函数

setup中调用生命周期狗子函数 需要在函数前面加 on 并且首字母大写

 import { createApp, reactive, onMounted, onUnmounted} from 'vue'
   const app = createApp({
    setup () {
        
        
      onMounted(() => {
        ......
      })

      onUnmounted(() => {
        ......
      })
        
      return {
          ......
      }
    }
   })

reactive/ toRefs/ref

都是创建响应式

reactive 创建的响应式的对象 不能解构 function

reactive 创建的响应式的对象 代理对象解构的时候 相当于复制一份值 重新赋值的时候不会触发代理对象的get set 所以不能解构

toRefs function

把对象的每一个属性都转换成响应式对象 ， toRefs 要求传入的对象必须是一个响应式对象，内部会创建一个新的对象遍历传入对象的所有属性，把所有的属性值都转换为响应式对象，挂载到新创建的对象上 返回这个新对象，她内部会为代理对象的每一个属性创建一个带有value的对象 该对象是响应式的 value具有get set ，get获取代理对象的值 set设置代理对象的值

ref function

把基本数据类型转换为响应式对象

ref返回一个响应式对象 具有value属性 value属性为设置的值

基本数据类型保存的是一个值

 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')

computed 计算属性

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')

watch 监听器

 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')

watchEffect

import { createApp, ref, watchEffect } from './node_modules/vue/dist/vue.esm-browser.js'

    createApp({
      setup () {
        const count = ref(0)
        const stop = watchEffect(() => {
          console.log(count.value)
        })

        return {
          count,
          stop,
          increase: () => {
            count.value++
          }
        }
      }
    }).mount('#app')

标签：vue,createApp,对象,初识,js,api,vue3.0,const
来源： https://www.cnblogs.com/fengbaba/p/14409304.html