实例学习Vue源码第一篇-实例

实例学习VUE源码(一)

  • 实例代码
  • 实例解析
  • 实例渲染过程

实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache"> 
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
    <meta http-equiv="expires" content="0">
    <title>Portal</title>
	<script type="text/javascript" src="C:/Users/qingminglong/Desktop/Javascript/vue.js"></script>
<body>
<div id="app">

<input v-model="message" placeholder="请输入值">
<p>{
     {
      reversedMessage }}</p>
<p>{
     {
      message }}</p>
	
<runoob></runoob>
</div>
<script>
var ChildComponent = {
     
  template: '

自定义组件!
{ {childMessage}}
{ {reversedChildMessage}}

'
, data() { return { childMessage: "hello reversedChildMessage" } }, computed: { // 计算属性的 getter reversedChildMessage: function () { // `this` 指向 vm 实例 return this.childMessage.split('').reverse().join(''); } } } var vueObj = new Vue({ el: '#app', data: { message: 'Hello Vue' }, methods: { getMessage: function (val) { console.log(val) }, addCount: function() { this.counter += 1 } }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }, components: { // 将只在父模板可用 'runoob': ChildComponent } }); </script> </body> </html>

实例解析

  • 定义了ChildComponent组件,此组件有模板(template)属性、数据(data)属性和计算(computed)属性;计算属性值是数据属性的倒转值(反转值);
  • 定义了VUE实例,此实例有元素(el)属性、方法(methods)属性、数据(data)属性、计算(computed)属性和组件(components)属性;
  • input控件显示data属性中message的值;
    下一遍将探究下,Vue实例的初始化过程,包括data属性和computed属性初始化;
    实例运行结果:
    实例学习Vue源码第一篇-实例_第1张图片

实例渲染过程

实例学习Vue源码第一篇-实例_第2张图片
1 调用 compile 函数,生成 render 函数字符串 ,编译过程如下:

  • parse 函数解析 template,生成 ast(抽象语法树)
  • optimize 函数优化静态节点 (标记不需要每次都更新的内容,diff 算法会直接跳过静态节点,从而减少比较的过程,优化了 patch 的性能)
  • generate 函数生成 render 函数字符串
    2 调用 new Watcher 函数,监听数据的变化,当数据发生变化时,Render 函数执行生成 vnode 对象
    3 调用 patch 方法,对比新旧 vnode 对象,通过 DOM diff 算法,添加、修改、删除真正的 DOM 元素

下一篇:实例学习Vue源码第二篇-浅析初始化到挂载过程

你可能感兴趣的:(VUE,vue)