自学内容网 自学内容网
自学内容网 > 正文

请你谈谈：vue的渲染机制（render）- 3举例说明问题

🕗 发布于 2024-11-29 09:09 vue.js  前端  javascript  
<script>
export default {
  name: 'HelloWorld',
  // <div id="son-id" title="son-title" style="background-color: blue; width: 500px; height: 100px;">son-dev</div>
  render(createElement, context) {
    return createElement(
        'div',
        {
          attrs: {
            id: 'son-id',
            title: 'son-title'
          },
          style: {
            'background-color' : 'blue',
            'width': '500px',
            'height': '100px'
          }
        },
        'son-dev'
    )
  },
}
</script>

这段代码定义了一个名为 HelloWorld 的 Vue 组件，它完全通过 render 函数来生成其 HTML 结构，而不是使用模板语法。下面是对这段代码的详细解读：

组件定义

  • name: 组件的名称是 HelloWorld。
  • render: 这是一个函数，它接收两个参数：createElement 和 context。createElement 用于创建虚拟 DOM 节点，而 context 包含了当前组件的上下文信息（尽管在这个例子中并未使用到 context）。

render 函数

render(createElement, context) {
  // 使用 createElement 函数创建一个 div 元素
  return createElement(
    'div', // 元素的标签名
    {
      // 元素的属性和样式
      attrs: {
        id: 'son-id', // 设置元素的 id 属性
        title: 'son-title' // 设置元素的 title 属性
      },
      style: {
        'background-color': 'blue', // 设置背景颜色为蓝色
        'width': '500px', // 设置元素宽度为 500 像素
        'height': '100px' // 设置元素高度为 100 像素
      }
    },
    'son-dev' // 元素的子节点内容，这里是纯文本 'son-dev'
  )
}

解读

  • createElement: 这个函数用于创建一个虚拟 DOM 节点。它接收三个参数：

    1. 字符串类型的标签名（在这个例子中是 'div'）。
    2. 一个对象，包含了这个元素的属性和样式。
      • attrs: 一个对象，包含了要设置到元素上的 HTML 属性。
      • style: 一个对象，包含了要设置到元素上的内联样式。
    3. 子节点（在这个例子中是字符串 'son-dev'，它会被渲染为纯文本）。

  • 返回值: render 函数返回一个虚拟 DOM 节点，Vue 会使用这个节点来渲染组件的 DOM 结构。

结果

当这个组件被渲染时，它会在页面上生成一个 div 元素，这个元素具有以下特征：

  • id 属性值为 "son-id"。
  • title 属性值为 "son-title"。
  • 背景颜色为蓝色。
  • 宽度为 500 像素。
  • 高度为 100 像素。
  • 包含纯文本内容 "son-dev"。

这个组件没有使用到 Vue 的模板语法或单文件组件的 <template> 部分，而是完全通过编程方式定义了其结构和样式。

<script>
//    <img src="@/assets/Snipaste_2024-11-28_09-48-30.png" alt="图片标签属性" title="提示文本，鼠标放到图像上显示的文字" >
export default {
  name: 'HelloWorld',
  render(createElement, context) {
    return createElement(
        'img',
        {
          attrs: {
            src: '/Snipaste_2024-11-28_09-48-30.png', // 这里面的图片要放到public
            alt: '图片标签属性',
            title: '提示文本，鼠标放到图像上显示的文字'
          },
          style: {
            width: '100px',
            height: '100px',
          }
        }
    )
  },
}
</script>

这段代码定义了一个名为 HelloWorld 的 Vue 组件，它使用了 render 函数来生成一个 img 元素，而不是使用模板语法。下面是对这段代码的详细解读：

组件定义

  • name: 组件的名称是 HelloWorld。
  • render: 这是一个函数，它接收两个参数：createElement 和 context。在这个例子中，context 参数没有被使用，但它是 Vue 提供的，包含了当前组件的上下文信息。

render 函数

render(createElement, context) {
  // 使用 createElement 函数创建一个 img 元素
  return createElement(
    'img', // 元素的标签名
    {
      // 元素的属性和样式
      attrs: {
        src: '/Snipaste_2024-11-28_09-48-30.png', // 图片的源路径
        alt: '图片标签属性', // 替代文本，当图片无法加载时显示
        title: '提示文本，鼠标放到图像上显示的文字' // 鼠标悬停时显示的提示文本
      },
      style: {
        width: '100px', // 设置图片宽度为 100 像素
        height: '100px' // 设置图片高度为 100 像素
      }
    }
    // 注意：这里没有子节点，因为 img 元素是自闭合的
  )
}

注意事项

  • 图片路径: 在 src 属性中，路径是 '/Snipaste_2024-11-28_09-48-30.png'。这个路径是相对于应用的根目录（在 Vue CLI 创建的项目中，通常是 public 文件夹）。如果你想要使用 @/assets/ 这样的别名路径（它通常指向 src/assets），你需要在 Vue CLI 的配置中确保别名被正确设置，并且由于 render 函数是在运行时执行的，而别名是在构建时由 Webpack 处理的，因此你不能直接在 render 函数中使用别名路径。你需要将图片放在 public 文件夹中，或者使用构建时的静态资源处理来确保路径正确。

  • 样式: 图片的宽度和高度都被设置为 100px。

  • 替代文本和提示文本: alt 属性提供了替代文本，这对于 SEO 和无障碍访问很重要。title 属性提供了当鼠标悬停在图片上时显示的提示文本。

结果

当这个组件被渲染时，它会在页面上生成一个 img 元素，这个元素：

  • 显示一张位于 public 文件夹中的图片（如果路径正确）。
  • 有替代文本 "图片标签属性"。
  • 有提示文本 "提示文本，鼠标放到图像上显示的文字"，当鼠标悬停在图片上时显示。
  • 宽度和高度都被设置为 100px。

这个组件完全通过编程方式定义了其结构和样式，没有使用 Vue 的模板语法或单文件组件的 <template> 部分。

<script>
//     <h4>1.外部链接</h4>
//     <a href="http://www.qq.com" target="_blank"> 腾讯</a>
export default {
  name: 'HelloWorld',
  render(createElement, context) {
    return createElement(
        'div',
        {},
        [
          createElement(
              'h4',
              {},
              '1.外部链接'
          ),
          createElement(
              'a',
              {
                attrs: {
                  href: 'http://www.qq.com',
                  target: '_blank'
                }
              },
              '腾讯'
          ),
        ]
    )
  },
}
</script>

这段代码是一个使用Vue.js框架编写的组件定义。Vue.js是一个用于构建用户界面的渐进式JavaScript框架。下面是对这段代码的详细解读：

  1. 组件定义：

    • export default：这是ES6模块导出语法，表示默认导出这个对象。在这个例子中，导出的对象是一个Vue组件的配置对象。
    • name: 'HelloWorld'：这是组件的名称，这里命名为HelloWorld。这个名称主要用于调试和开发工具中。

  2. render函数：

    • render(createElement, context)：这是Vue组件的render函数，它是Vue 2.x版本中用于创建虚拟DOM的推荐方式之一。createElement是一个函数，用于创建虚拟节点（VNode），context是一个包含组件上下文信息的对象。
    • 在render函数内部，使用createElement函数创建了两个虚拟节点：一个h4标题节点和一个a链接节点。

  3. 创建h4节点：

    • createElement('h4', {}, '1.外部链接')：这行代码创建了一个h4元素，没有设置任何属性（第二个参数为空对象{}），并且设置了文本内容为1.外部链接。

  4. 创建a节点：

    • createElement('a', { attrs: { href: 'http://www.qq.com', target: '_blank' } }, '腾讯')：这行代码创建了一个a元素，即一个链接。
      • attrs：这是一个对象，包含了要设置到元素上的HTML属性。这里设置了两个属性：href和target。
        • href: 'http://www.qq.com'：指定了链接的目标地址，即点击这个链接会跳转到http://www.qq.com。
        • target: '_blank'：指定了链接的打开方式，_blank表示在新窗口或新标签页中打开链接。
      • 第三个参数'腾讯'是链接的文本内容，即用户看到的可点击的文本。

  5. 返回虚拟DOM：

    • render函数最终返回了一个包含h4和a节点的数组，Vue会基于这个虚拟DOM树来渲染实际的DOM。

总结：这段代码定义了一个名为HelloWorld的Vue组件，该组件通过render函数渲染了一个包含标题和链接的DOM结构。链接指向腾讯官网，并且在新标签页中打开。

<script>
/**
 <table align="center" width="500" height="249" border="1" cellspacing="0">
   <thead>
     <tr>
       <th>排名</th>
       <th>关键词</th>
       <th>趋势</th>
       <th>进入搜索</th>
       <th>最近七日</th>
       <th>相关链接</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>鬼吹灯</td>
       <td><img src="Snipaste_2024-11-28_09-48-30.png" style="width: 100px;height: 100px;"></td>
       <td>456</td>
       <td>123</td>
       <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
     </tr>
   </tbody>
 </table>
 */
export default {
  name: 'HelloWorld',
  render(createElement, context) {
    return createElement(
        'table',
        {
          attrs: {
            'align': 'center',
            'width': '500',
            'height': '249',
            'border': '1',
            'cellspacing': '0',

          }
        },
        [
          createElement(
              'thead',
              [
                  createElement('tr',
                      [
                          createElement('th', '排名'),
                          createElement('th', '关键词'),
                          createElement('th', '进入搜索'),
                          createElement('th', '最近七日'),
                          createElement('th', '相关链接'),
                      ])
              ]
          ),
          createElement(
              'tbody',
              [createElement('tr',
               [
                 createElement('td', '1'),
                 createElement('td', '鬼吹灯'),
               ]
              )]
          ),
        ]
    )
  },
}
</script>

<script>
export default {
  name: 'HelloWorld',
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      helloData: ''
    }
  },
  created() {
    this.helloData = this.value
  },
  render(createElement, context) {
    return createElement('Input', {
      attrs: {
        placeholder: 'Enter something...',
        size: 'large',
        maxlength: 20,
        'show-word-limit': true,
        type: 'text',
        search: true,
      },
      style: {
        width: '300px'
      },
      props: {
        value: this.helloData
      },
      on: {
        input: (value) => {
          this.helloData = value
        },
        'on-change': (event) => {
          console.log(this.helloData)
        }
      },
    });
  }
}
</script>

<style>
</style>

这段代码定义了一个名为 HelloWorld 的 Vue 组件，它使用了 render 函数来生成一个自定义的 Input 组件（这里假设 Input 是一个已经在项目中注册的全局或局部组件）。下面是对这段代码的详细解读：

组件定义

  • name: 组件的名称是 HelloWorld。
  • components: 一个空对象，表明这个组件没有局部注册的子组件（尽管在这个例子中 Input 组件被使用了，但它应该是全局注册的，或者在这个脚本的外部以某种方式被注册）。
  • props: 定义了一个名为 value 的 prop，它可以是 String 或 Number 类型，默认值为空字符串 ''。
  • data: 一个函数，返回一个对象，该对象包含了一个名为 helloData 的数据属性，初始值为空字符串 ''。
  • created: 一个生命周期钩子，当组件实例被创建后调用。它将 helloData 初始化为传入的 value prop 的值。

render 函数

render(createElement, context) {
  // 使用 createElement 函数创建一个 Input 组件
  return createElement('Input', {
    // 组件的属性
    attrs: {
      placeholder: 'Enter something...',
      size: 'large',
      maxlength: 20,
      'show-word-limit': true,
      type: 'text',
      search: true,
    },
    // 组件的样式
    style: {
      width: '300px'
    },
    // 传递给 Input 组件的 props
    props: {
      value: this.helloData
    },
    // 监听的事件
    on: {
      input: (value) => {
        this.helloData = value
      },
      'on-change': (event) => {
        console.log(this.helloData)
      }
    },
  });
}

注意事项

  • Input 组件: 这个组件使用了 Input 作为其根元素，但请注意，Vue 核心库并不包含一个名为 Input 的组件。这意味着 Input 应该是项目中自定义的一个组件，或者是一个来自第三方库的组件，它需要在全局或局部被注册才能在这个组件中使用。

  • 属性与样式: attrs 对象包含了要传递给 Input 组件的 HTML 属性，而 style 对象则包含了内联样式。

  • props: 通过 props 对象，将 helloData 的值传递给 Input 组件的 value prop。这是实现父子组件数据通信的一种方式。

  • 事件监听: on 对象包含了要监听的事件及其处理函数。这里监听了 input 事件（当输入值变化时触发）和 on-change 事件（这个事件名看起来像是自定义的，因为 Vue 原生并不提供 on-change 事件，但组件可以自定义事件）。input 事件的处理函数更新了 helloData 的值，而 on-change 事件的处理函数则在控制台打印了 helloData 的值。

样式部分

<style> 标签是空的，这意味着这个组件没有定义任何特定的样式。

结果

当这个组件被渲染时，它会在页面上生成一个自定义的 Input 组件，这个组件：

  • 有占位符文本 "Enter something..."。
  • 被设置为大号尺寸。
  • 最多接受 20 个字符。
  • 显示字数限制。
  • 是文本类型的输入框。
  • 启用了搜索功能（尽管这通常不是原生 <input> 的属性，所以这可能是 Input 组件特有的）。
  • 宽度被设置为 300px。
  • 初始值由父组件通过 value prop 传入。
  • 当输入值变化时，会更新组件内部的 helloData 数据属性。
  • 当 on-change 事件被触发时，会在控制台打印当前的 helloData 值。

原文地址：https://blog.csdn.net/zs18753479279/article/details/144103288

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024