1. 全栈程序员必看首页

彻底明白vue双向绑定底层原理(源码分析)

全栈程序员-用户IM • • 未分类

彻底明白vue双向绑定底层原理(源码分析)vue是一个mvvm框架，双向绑定是vue的一个核心功能，所谓双向绑定就是当试图发生改变的时候传递给VM(ViewModel),让数据得到更新，当数据发生改变的时候传给VM(ViewModel),使得视图发生变化！概念都知道，但是vue怎么做到的呢？看下面的一张图（图是搬运别人的）可能你现在看不明白，observer是什么东西，watchter，Dep又是什么东西?没有关系，接下来只要你看完我这篇文章，保证给你整的明明白白！看上图，从左边开始newMVVM其实就是我newVue(),我们一

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

vue是一个mvvm框架，双向绑定是vue的一个核心功能，所谓双向绑定就是当试图发生改变的时候传递给VM(ViewModel ),让数据得到更新，当数据发生改变的时候传给VM(ViewModel ),使得视图发生变化！概念都知道，但是vue怎么做到的呢？看下面的一张图（图是搬运别人的）
在这里插入图片描述
可能你现在看不明白，observer是什么东西，watchter，Dep又是什么东西? 没有关系，接下来只要你看完我这篇文章，保证给你整的明明白白！看上图，从左边开始 new MVVM 其实就是我new Vue(),我们一般vue代码都这样写

new Vue({ 
   
 el: '#app',
 data: { 
   
     title: 'hello',
     text: 'vue'
})

一. 发布者－订阅者模式

再看图，observer（观察者），劫持监听所有属性，什么意思呢？vue是通过这种模式进行数据劫持的，这种模式是发布者－订阅者模式

  1. 订阅者：就像我们生活中在淘宝京东买东西一样，我们是消费者就相当这种模式中的订阅者一样
  2. 发布者：你想买的书没货了，你和卖家说等你有货了你通知我，我再来买，那么卖家就是这种模式中的发布者，当然不只你一个人想买这本书，所以一个发布者可以给多个订阅者发布信息

知道了这种模式，它们是怎么通过数据劫持的，这里要引出Object.defineProperty()，了解这个之前先来看下对象中存在的属性，看个例子！

var obj = { 
   }
obj.a = 10;
console.log(Object.getOwnPropertyDescriptor(obj, "a"));
//{value: 10, writable: true, enumerable: true, configurable: true}

Object.defineProperty(obj, "b", { 
   
    set: function () { 
   

    },
    get: function () { 
   

    }
})
console.log(Object.getOwnPropertyDescriptor(obj, "b"));
//{enumerable: false, configurable: false, get: ƒ, set: ƒ}

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符,数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一；不能同时是两者。 所以我们这里要用到存取描述符，这里只是说个大概，不懂的可以点击看详细介绍

var obj = { 
   }
Object.defineProperty(obj, "b", { 
   
    set: function (value) { 
   
        console.log('触发了set方法,我让它变成20');
        this.value = 20;
    },
    get: function () { 
   
        console.log('触发了get方法');
        return this.value;
    }
})
obj.b = 10; //'触发了set方法,我让它变成20'
console.log(obj.b)//'触发了get方法' 20

看到这个例子是不是有点启发，当我给obj.b赋值的时候，这只是数据发生改变，是不是可以通知视图我的值要改变了，然后调用方法去更新视图！b就是之前所说的订阅者，还是看之前的代码

new Vue({ 
   
 el: '#app',
 data: { 
   
     title: 'hello',
     text: 'vue'
})

很明 data里面的属性，它是个对象，不像上面一样是个单独的属性，那么下面来封装一下吧！

//创建一个发布者类
function Observer(data) { 
   
  this.data = data;
  this.walk(data);//对data里面的数据遍历加上发布者模式
}
Observer.prototype = { 
   
  walk: function (data) { 
   
      var self = this;
      Object.keys(data).forEach(function (key) { 
   
          self.defineReactive(data, key, data[key]);
      });
  },
  defineReactive: function (data, key, val) { 
   
      //判断下是不是对象，如果是的继续遍历
      observe(val);
      Object.defineProperty(data, key, { 
   
          enumerable: true,
          configurable: true,
          get: function () { 
   
           
          },
          set: function (newVal) { 
   
              if (newVal === val) { 
   
                  return;
              }
              val = newVal;
              //通知视图更新
          }
      });
  }
};

function observe(value) { 
   
  if (!value || typeof value !== 'object') { 
   
      return;
  }
  return new Observer(value);
};

上面的代码比较简单，先创建一个发布者类Observer，对data对象里面数据进行遍历全部加上发布者模式有没有发现一个问题，看下面例子！

new Vue({ 
   
    el: '#app',
    data: { 
   
        title: 'hello',
        text: 'vue'
    },
    methods: { 
   
        clickFn: function () { 
   
            this.title = 'hello!!!';
        }
    }
});

title数据是在data对象里面定义，但是为什么下面操作数据的时候不是 this.data.title?而是直接this.title是不是很疑惑，到底做了啥操作？那么我们再来看个例子！

var vue = { 
   
    data: { 
   
        b: 10
    }
};

Object.defineProperty(vue, "b", { 
   
    set: function (value) { 
   
        this.data["b"] = value;
    },
    get: function () { 
   
        return this.data["b"]
    }
})
Object.defineProperty(vue.data, "b", { 
   
    set: function (value) { 
   
        this.value = value;
    },
    get: function (value) { 
   
        return this.value
    }
})
vue.b = 20;
console.log(vue.data.b); //20

其实访问到vue.b就访问到了vue.data.b，所以需要定义一个vue类做个代理，看下面代码

function Vue (options) { 

var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function(key) { 

//代理发布者模式
self.proxyKeys(key);
});
observe(this.data);
}
Vue.prototype = { 

proxyKeys: function (key) { 

var self = this;
Object.defineProperty(this, key, { 

enumerable: false,
configurable: true,
get: function getter () { 

return self.data[key];
},
set: function setter (newVal) { 

self.data[key] = newVal;
}
});
}
};
function observe(value) { 

if (!value || typeof value !== 'object') { 

return;
}
return new Observer(value);
};
function Observer(data) { 

this.data = data;
this.walk(data);//对data里面的数据遍历加上发布者模式
};
Observer.prototype = { 

walk: function (data) { 

var self = this;
Object.keys(data).forEach(function (key) { 

self.defineReactive(data, key, data[key]);
});
},
defineReactive: function (data, key, val) { 

//判断下是不是对象，如果是的继续遍历
observe(val);
Object.defineProperty(data, key, { 

enumerable: true,
configurable: true,
get: function () { 

},
set: function (newVal) { 

if (newVal === val) { 

return;
}
val = newVal;
//通知视图更新
}
});
}
};

好了说完了observe，回到最上面那个图

在这里插入图片描述
再往右看，observe的set方法可以通知变化给了dep的东西，dep又通知变化给watcher,上面说了那么久连html都没有写

<body>
<div id="app">
<h1>{
{title}}</h1>
<h2>{
{title}}</h2>
<p>{
{text}}</p>
</div>
</body>

{
{title}}是一个watcher对象，{
{text}}也是个watcher对象，上面html有2个{
{title}},所以需要用Dep包裹起来（这个过程叫做添加订阅者），当数据发生了变化可以通知Dep(遍历)更新视图，可以这么理解视图上的每个watcher是个订阅者，每个watcher都对应一个Dep(watcher集合)，当数据发生改变直接通知Dep，Dep会遍历所有watcher更新视图

二. compile

compile阶段做了什么？

  1. 解析模板指令，并替换模板数据，初始化视图
  2. 将模板指令对应的节点绑定对应的更新函数

为了解析模板，首先要获得dom元素，然后对含有dom元素上含有指令的节点进行处理，这个过程对dom元素的操作比较繁琐,所以采用了虚拟DOM的创建

//以前这么写
var ul = document.querySelector('ul');
for (var i = 0; i < 10; i++) { 

var li = document.createElement("li");
li.innerHTML = "我是第" + i + "个li";
ul.appendChild(li);
};
//虚拟DOM这么写
var ul = document.querySelector('ul');
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) { 

var li = document.createElement("li");
li.innerHTML = "我是第" + i + "个li";
fragment.appendChild(li);
};
ul.appendChild(fragment);

类似这么频繁的操作dom元素都会引起重新渲染，使得浏览器发生了很多次渲染，效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因，利用创建DocumentFragment可以优化这个问题，因为文档片段存在于内存中，并不在DOM中，所以将子元素插入到文档片段中时不会引起页面回流（对元素位置和几何上的计算），因此使用DocumentFragment可以起到性能优化的作用，所以vue也是利用了这点废话不多说，看下vue是怎么操作的？先把vue类和compile关联起来

function Vue (options) { 

var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function(key) { 

//代理发布者模式
self.proxyKeys(key);
});
observe(this.data);
//关联Compile类
new Compile(options.el, this);
}

接下来创建Compile类,这里代码比较多，我尽量把注释写详细点

function Compile(el, vm) { 

this.vm = vm;
//找到el元素
this.el = document.querySelector(el);
this.fragment = null;
//初始化Compile
this.init();
}
Compile.prototype = { 

init: function () { 

if (this.el) { 

this.fragment = this.nodeToFragment(this.el);
//这里才是Compile的关键
this.compileElement(this.fragment);
//一次性加到el元素里面，这里只需要重新渲染一次即可，提高浏览器性能
this.el.appendChild(this.fragment);
} else { 

console.log('Dom元素不存在');
}
},
nodeToFragment: function (el) { 

//创建文档片段
var fragment = document.createDocumentFragment();
//把el元素下所有的子都放进文档片段中
var child = el.firstChild;
while (child) { 

// 将Dom元素移入fragment中
fragment.appendChild(child);
child = el.firstChild
}
return fragment;
},
compileElement: function (el) { 

//获取到文档片当的所有的子节点
var childNodes = el.childNodes;
var self = this;
//遍历所有子节点
[].slice.call(childNodes).forEach(function(node) { 

// 找到匹配{ 
{}}的
var reg = /\{\{(.*)\}\}/;
var text = node.textContent;
//判断是不是元素节点
if (self.isElementNode(node)) { 
  
//compile元素指令方法
self.compile(node);
//判断是不是文本节点 并且配到{ 
{ }}
} else if (self.isTextNode(node) && reg.test(text)) { 

//compile文本方法
self.compileText(node, reg.exec(text)[1]);
}
//如果还有子节点就递归下去
if (node.childNodes && node.childNodes.length) { 

self.compileElement(node);
}
});
},
compile: function(node) { 

//获取元素的属性 例如 v-model，v-on:click
var nodeAttrs = node.attributes;
var self = this;
//遍历属性
Array.prototype.forEach.call(nodeAttrs, function(attr) { 

var attrName = attr.name;
//判断是不是个指令
if (self.isDirective(attrName)) { 

var exp = attr.value;
var dir = attrName.substring(2);
//事件指令处理函数
if (self.isEventDirective(dir)) { 
  
//事件指令处理函数
self.compileEvent(node, self.vm, exp, dir);
} else { 
  
//v-model指令处理函数
self.compileModel(node, self.vm, exp, dir);
}
//解析完之后html上移除v-model，v-on等属性
node.removeAttribute(attrName);
}
});
},
compileText: function(node, exp) { 

var self = this;
//获取值
var initText = this.vm[exp];
//初始化的时候更新值
this.updateText(node, initText);
//初始化wather
new Watcher(this.vm, exp, function (value) { 

//更新文本节点
self.updateText(node, value);
});
},
compileEvent: function (node, vm, exp, dir) { 

//获取事件名
var eventType = dir.split(':')[1];
var cb = vm.methods && vm.methods[exp];
if (eventType && cb) { 

//执行回调事件
node.addEventListener(eventType, cb.bind(vm), false);
}
},
compileModel: function (node, vm, exp, dir) { 

var self = this;
//获取值
var val = this.vm[exp];
//初始化的时候更新值
this.modelUpdater(node, val);
new Watcher(this.vm, exp, function (value) { 

//更新元素文本值
self.modelUpdater(node, value);
});
//这里是视图的数据更改通过事件来获取改变的值
node.addEventListener('input', function(e) { 

var newValue = e.target.value;
if (val === newValue) { 

return;
}
self.vm[exp] = newValue;
val = newValue;
});
},
//更新文本，文本节点的是取文本节点textContent
updateText: function (node, value) { 

node.textContent = typeof value == 'undefined' ? '' : value;
},
//因为是v-model 所以一般都是设置value值 例如input.vlaue
modelUpdater: function(node, value, oldValue) { 

node.value = typeof value == 'undefined' ? '' : value;
},
//判断是不是个v-model指令
isDirective: function(attr) { 

return attr.indexOf('v-') == 0;
},
//判断是不是个v-on指令
isEventDirective: function(dir) { 

return dir.indexOf('on:') === 0;
},
//判断是不是元素节点 ，nodeType为1
isElementNode: function (node) { 

return node.nodeType == 1;
},
//判断是不是文本节点，nodeType为3
isTextNode: function(node) { 

return node.nodeType == 3;
}
}

接下来是完成watcher的实现

function Watcher(vm, exp, cb) { 

this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get();  // 将自己添加到订阅器的操作
}
Watcher.prototype = { 

//数据改变更新视图方法
update: function() { 

this.run();
},
run: function() { 

var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) { 

this.value = value;
//新值和旧值不一样，执行watcher里面的回调函数更新视图
this.cb.call(this.vm, value, oldVal);
}
},
get: function() { 

//初始化为了加入订阅时候缓存自己,加入订阅之后，删除缓存
Dep.target = this;  // 缓存自己
var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
Dep.target = null;  // 删除缓存
return value;
}
};

所以 watcher初始化的时候 Observer应该把watcher加入订阅，如果有数据更改时候，应该通知Dep，Dep再去通知wacher完成更新视图，Observer代码修改如下(注意注释的地方)

function Observer(data) { 

this.data = data;
this.walk(data);
}
Observer.prototype = { 

walk: function(data) { 

var self = this;
Object.keys(data).forEach(function(key) { 

self.defineReactive(data, key, data[key]);
});
},
defineReactive: function(data, key, val) { 

//创建Dep类来包裹watcher
var dep = new Dep();
observe(val);
Object.defineProperty(data, key, { 

enumerable: true,
configurable: true,
get: function() { 

//第一次初始化watcher，添加到Dep里面
if (Dep.target) { 

dep.addSub(Dep.target);
}
return val;
},
set: function(newVal) { 

if (newVal === val) { 

return;
}
val = newVal;
//值发生改变，通知watcher更新视图
dep.notify();
}
});
}
};
function observe(value, vm) { 

if (!value || typeof value !== 'object') { 

return;
}
return new Observer(value);
};
function Dep () { 

this.subs = [];
}
Dep.prototype = { 

addSub: function(sub) { 

this.subs.push(sub);
},
notify: function() { 

this.subs.forEach(function(sub) { 

sub.update();
});
}
};
Dep.target = null;

最终的代码：

<body>
<div id="app">
<h1>{
{title}}</h1>
<h1>{
{text}}</h1>
<input v-model="val">
<h1>{
{val}}</h1>
<button v-on:click="clickFn">点击</button>
</div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript"> new Vue({ 
 el: '#app', data: { 
 title: 'hello', text: 'vue', val: "双向绑定" }, methods: { 
 clickFn: function () { 
 this.title = 'vue双向绑定原理'; } } }); </script>

//vue.js
function Vue (options) { 

var self = this;
this.data = options.data;
this.methods = options.methods;
Object.keys(this.data).forEach(function(key) { 

self.proxyKeys(key);
});
observe(this.data);
new Compile(options.el, this);
}
Vue.prototype = { 

proxyKeys: function (key) { 

var self = this;
Object.defineProperty(this, key, { 

enumerable: false,
configurable: true,
get: function getter () { 

return self.data[key];
},
set: function setter (newVal) { 

self.data[key] = newVal;
}
});
}
}
//observer.js
function Observer(data) { 

this.data = data;
this.walk(data);
}
Observer.prototype = { 

walk: function(data) { 

var self = this;
Object.keys(data).forEach(function(key) { 

self.defineReactive(data, key, data[key]);
});
},
defineReactive: function(data, key, val) { 

var dep = new Dep();
observe(val);
Object.defineProperty(data, key, { 

enumerable: true,
configurable: true,
get: function() { 

if (Dep.target) { 

dep.addSub(Dep.target);
}
return val;
},
set: function(newVal) { 

if (newVal === val) { 

return;
}
val = newVal;
dep.notify();
}
});
}
};
function observe(value, vm) { 

if (!value || typeof value !== 'object') { 

return;
}
return new Observer(value);
};
function Dep () { 

this.subs = [];
}
Dep.prototype = { 

addSub: function(sub) { 

this.subs.push(sub);
},
notify: function() { 

this.subs.forEach(function(sub) { 

sub.update();
});
}
};
Dep.target = null;
//compile.js
function Compile(el, vm) { 

this.vm = vm;
this.el = document.querySelector(el);
this.fragment = null;
this.init();
}
Compile.prototype = { 

init: function () { 

if (this.el) { 

this.fragment = this.nodeToFragment(this.el);
this.compileElement(this.fragment);
this.el.appendChild(this.fragment);
} else { 

console.log('Dom元素不存在');
}
},
nodeToFragment: function (el) { 

var fragment = document.createDocumentFragment();
var child = el.firstChild;
while (child) { 

// 将Dom元素移入fragment中
fragment.appendChild(child);
child = el.firstChild
}
return fragment;
},
compileElement: function (el) { 

var childNodes = el.childNodes;
var self = this;
[].slice.call(childNodes).forEach(function(node) { 

var reg = /\{\{(.*)\}\}/;
var text = node.textContent;
if (self.isElementNode(node)) { 
  
self.compile(node);
} else if (self.isTextNode(node) && reg.test(text)) { 

self.compileText(node, reg.exec(text)[1]);
}
if (node.childNodes && node.childNodes.length) { 

self.compileElement(node);
}
});
},
compile: function(node) { 

var nodeAttrs = node.attributes;
var self = this;
Array.prototype.forEach.call(nodeAttrs, function(attr) { 

var attrName = attr.name;
if (self.isDirective(attrName)) { 

var exp = attr.value;
var dir = attrName.substring(2);
if (self.isEventDirective(dir)) { 
  // 事件指令
self.compileEvent(node, self.vm, exp, dir);
} else { 
  // v-model 指令
self.compileModel(node, self.vm, exp, dir);
}
node.removeAttribute(attrName);
}
});
},
compileText: function(node, exp) { 

var self = this;
var initText = this.vm[exp];
this.updateText(node, initText);
new Watcher(this.vm, exp, function (value) { 

self.updateText(node, value);
});
},
compileEvent: function (node, vm, exp, dir) { 

var eventType = dir.split(':')[1];
var cb = vm.methods && vm.methods[exp];
if (eventType && cb) { 

node.addEventListener(eventType, cb.bind(vm), false);
}
},
compileModel: function (node, vm, exp, dir) { 

var self = this;
var val = this.vm[exp];
this.modelUpdater(node, val);
new Watcher(this.vm, exp, function (value) { 

self.modelUpdater(node, value);
});
node.addEventListener('input', function(e) { 

var newValue = e.target.value;
if (val === newValue) { 

return;
}
self.vm[exp] = newValue;
val = newValue;
});
},
updateText: function (node, value) { 

node.textContent = typeof value == 'undefined' ? '' : value;
},
modelUpdater: function(node, value, oldValue) { 

node.value = typeof value == 'undefined' ? '' : value;
},
isDirective: function(attr) { 

return attr.indexOf('v-') == 0;
},
isEventDirective: function(dir) { 

return dir.indexOf('on:') === 0;
},
isElementNode: function (node) { 

return node.nodeType == 1;
},
isTextNode: function(node) { 

return node.nodeType == 3;
}
}
//watcher.js
function Watcher(vm, exp, cb) { 

this.cb = cb;
this.vm = vm;
this.exp = exp;
this.value = this.get();  // 将自己添加到订阅器的操作
}
Watcher.prototype = { 

update: function() { 

this.run();
},
run: function() { 

var value = this.vm.data[this.exp];
var oldVal = this.value;
if (value !== oldVal) { 

this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
get: function() { 

Dep.target = this;  // 缓存自己
var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
Dep.target = null;  // 释放自己
return value;
}
};

好累啊！终于写完了，我还是用简短的话描述下原理吧!

compile阶段解析html模板，第一次解析的时候会更新视图（数据的值直接更新到视图中） ，并初始化了watcher对象，初始化的时候做了啥，把watcher强制加入Dep里面，Dep你可以理解是一个装watcher的集合，每个watcher里面有个update方法可以更新视图，当ViewModel数据改变的时候会触发set方法，比较新的值和旧值是否相等，如果不相等，通知Dep，然后Dep会遍历每个watcher对象并执行watcher的update方法更新视图，反之，当视图发生改变（input输入），可以通过监听事件来获取视图的值，然后比较比较新的值和旧值是否相等，如果不相等，把新值赋值给ViewModel，然后ViewModel数据改变的时候又会触发set方法，重复上面的步骤更新视图

参考文献：Vue2.0双向绑定原理

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/193932.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • wing是什么_acwing是什么

    wing是什么_acwing是什么

    wing是什么_acwing是什么原题链接设有 N×N 的方格图，我们在其中的某些方格中填入正整数，而其它的方格中则放入数字0。如下图所示：某人从图中的左上角 A 出发，可以向下行走，也可以向右行走，直到到达右下角的 B 点。在走过的路上，他可以取走方格中的数（取走后的方格中将变为数字0）。此人从 A 点到 B 点共走了两次，试找出两条这样的路径，使得取得的数字和为最大。输入格式第一行为一个整数N，表示 N×N 的方格图。接下来的每行有三个整数，第一个为行号数，第二个为列号数，第三个为在该行、该列上所放的数。行和列编号从

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月8日
  • C# textbox密码框设置[通俗易懂]

    C# textbox密码框设置[通俗易懂]

    C# textbox密码框设置[通俗易懂]如果想让登录时输入的密码不可见，即显示***或者●●●或者其他自定义字符需要找到textbox的PasswordChar属性，填入*或者●

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月25日
  • Mysql的基本函数–与自定义函数

    Mysql的基本函数–与自定义函数

    Mysql的基本函数–与自定义函数什么是Mysql函数：类似于java的方法将一组逻辑语句封装在方法体对外暴露方法名事先提供好的一些功能可以直接使用函数可以用在select语句及其子句上也可以用在update，delete语句当中函数分类：1）字符串函数2）数值函数3)日期和时间函数4）流程函数5）聚合函数6)自定义函数7）其他函数字符串函数：concat(s1,s2…sn…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月27日
  • 跟我学在高德地图——标注我的位置

    跟我学在高德地图——标注我的位置

    跟我学在高德地图——标注我的位置在高德地图上展示当前位置

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月11日
  • QT中this指针

    QT中this指针

    QT中this指针一：this指针只能在一个类的成员函数中调用，它表示当前对象的地址。下面是一个例子： void Date::setMonth( int mn) { month=mn; // 这三句是等价的 this->month=mn; (*this).month=mn; }1.this只能在成员函数中使用。全局函数，静态函数都不能使用th

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月17日
  • oracle手动创建数据库_oracle怎么建库

    oracle手动创建数据库_oracle怎么建库

    oracle手动创建数据库_oracle怎么建库ORACLE手动建库ORACLE10GR2手动建库大致分为以下几个步骤编辑.bash_profile文件，设置环境变量创建所需目录结构创建初始化参数文件执行建库脚本下面以创建test数据库为例1、编辑.bash_profile文件，添加ORACLE_SID环境变量在.bash_profile文件中指定ORACLE_SIDexportORACLE_SID=test[oracle@targets…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月27日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号