《Vue零基础入门教程》第五课:挂载

1) 基本语法

一个应用实例必须在调用了 .mount() 方法后才会渲染

  • 传入参数: 可以是一个 CSS 选择器字符串(常用) 或者 一个实际的 DOM 元素

  • 返回值: 根组件实例

    // 挂载应用, 返回根组件实例
    const instance = app.mount('#app')
    console.log(instance)

分析结果. 可知

  1. instance是一个Proxy对象
  2. 在选项中定义的内容会被挂载到instance对象上

2) 根组件实例

之前, 我们通过调试工具改变data中的定义的状态时, 视图会响应变化.

如何通过代码实现同样的功能呢?

示例

复制代码
setTimeout(() => {
  instance.msg = 'world'
}, 1000)

在data中定义的状态会被代理到instance上.

当改变代理对象的状态值时, 可以拦截到set操作, 从而自定义set操作.

在自定义的set操作中更新DOM

3) 响应式原理初步

示例

复制代码
<script>
  const data = {
    msg: 'hello',
  }

  const pData = new Proxy(data, {
    get: function (target, key) {
      return target[key]
    },
    set: function (target, key, value) {
      target[key] = value
      console.log('更新DOM')
      document.querySelector('#app').innerHTML = value
    },
  })

  setTimeout(() => {
    pData.msg = 'world'
  }, 1000)

  console.log(data, pData)
</script>
  • data模拟原始数据
  • pData模拟代理数据

初次渲染时, 从data中获取数据, 后续修改代理对象的值, 会被拦截到, 并且更新DOM

4) 注意点

  1. 如果不调用.mount(), 不会解析模板
  2. mount()方法应该在应用配置的最后被调用
相关推荐
小墨宝5 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED20 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿24 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子25 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6638 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架