《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()方法应该在应用配置的最后被调用
相关推荐
三翼鸟数字化技术团队9 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei37 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js